Jquery textcomplete div

Question

大家好我有一个关于jquery textcomplete的问题。

我认为这很容易，但我不知道我该怎么做。

我创建了 DEMO 而没有jquery

那么我的问题是什么。我希望当我在textarea中打开括号(然后.textBox div自动打开。

我怎么能这样做，任何人都可以告诉我？

<div class="container">
    <div class="textarea_wrap">
        <textarea id="textarea" class="text"></textarea>
        <div class="tagBox"></div>
    </div>
</div>

CSS

 .container{
        width:300px;
        height:300px;
        margin:0px auto;
        margin-top:30px;
    }
    .textarea_wrap{
        width:100%;
        box-sizing:border-box;
        position:relative;
    }
    .text{
        width:100%;
        height:100px;
        box-sizing:border-box;
        outline:none;
        border:1px solid #999999;
    }
    .tagBox{
        width:300px;
        height:100px;
        background-color:red;
        position:absolute;
        top:100px;
        display:none;
    }

Answer 1

你可以这样做。

更新

＆＃13;

＆＃13;

$(document).ready(function(){$('#textarea').keyup(function(){

  if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
      $('.tagBox').show();
  }else{
        $('.tagBox').hide();
  }
});
});

＆＃13;

.container{
    width:300px;
    height:300px;
    margin:0px auto;
    margin-top:30px;
}
.textarea_wrap{
    width:100%;
    box-sizing:border-box;
    position:relative;
}
.text{
    width:100%;
    height:100px;
    box-sizing:border-box;
    outline:none;
    border:1px solid #999999;
}
.tagBox{
    width:300px;
    height:100px;
    background-color:red;
    position:absolute;
    top:100px;
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="textarea_wrap">
        <textarea id="textarea" class="text"></textarea>
        <div class="tagBox"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参阅Working Fiddle 使用正则表达式而不是几个条件：

JS：

 $(function(){
    $('#textarea').keyup(function(){
        if($(this).val().match(/([(]$)/g)){
            $('.tagBox').show();
        }else{
            $('.tagBox').hide();    
        }
    });
})