キーアップでのブートストラップのドロップダウン

Question

テキストボックスのクリックで表示される作業ドロップダウンがありますが、常にキーアップに表示したいと思います。私はキーアップ機能が働いていますが、入力後にクリックしてドロップダウンを表示させる必要があります。

 //This calls the delay function and will result in the customerNameUL_Populate function being called after the delay has passed. 
 
     function customerNameSearchTextbox_keyup() { 
 
      
 
      delay(function() { 
 
       if ($('#customerNameSearchTextbox').val().length > 0) { 
 
        customerNameUL_Populate(); 
 
        alert('dropdown'); //http://getbootstrap.com/javascript/#dropdowns 
 
        $('#customerNameSearchTextbox').dropdown(); <----- ? 
 
       } 
 
      else { 
 
        $('#customerNameUL').empty(); 
 
       }; 
 
      }, 500); 
 
     }; 
 

 
    //This function gets called to populate the list of customers for search 
 
     function customerNameUL_Populate() { 
 

 
      <working stuff> 
 
      
 
     };

 <div class="dropdown"> 
 
      <input type="text" id="customerNameSearchTextbox" class="form-control" placeholder="Customer" aria-describedby="basic-addon1" data-toggle="dropdown" onkeyup="customerNameSearchTextbox_keyup();" autocomplete="off"> 
 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="customerNameUL"> 
 
      </ul> 
 
     </div>

は

私は私が持っていると思う混乱が呼び出す、または何のクラスに割り当てるために、またはどのようなイベントを呼び出すためにどのようなイベントです。上記のアラートが消えて、私はどこに行きたいのかわかります。customerNameULを表示させるには、下の行を置き換えるだけです。

Answer 1

コードを少し変更する必要がありましたが、ここでの基本はうまくいくはずです。ご質問がある場合はお知らせください。

function customerNameSearchTextbox_keyup() { 
 
    var $this = $(this); 
 
    //In jQuery, I use $this as a reference to the jQuery-wrapped this object 
 
    var $parent = $this.parent('.dropdown'); 
 
    //Similar naming convention as $this. this is the parent object of our element, wrapped in jquery 
 

 
    if ($this.val().length > 0 && !$parent.hasClass('open')) { 
 
    //This if statement says: 
 
    //"If this value's length is gerater than 0 
 
    //AND the parent of this object does not have the 'open' class on it 
 
    //Continue with this code block: 
 
    $this.siblings('span.toggle-helper').dropdown('toggle'); 
 
    //searches for a sibling-level element that matches the CSS query 'span.toggle-helper', and fires the dropdown toggle method (showing it) 
 
    } else if ($this.val().length == 0) { 
 
    //If either one of those two requirements in the previous if is false, we end up here, where we only execute this code value's length is equal to 0. 
 
    $('#customerNameUL').empty(); 
 
    }; 
 

 
}; 
 

 
$(function() { 
 
    //$(function()....) is a shorter way to write $(document).ready(function()...); 
 
    $('#customerNameSearchTextbox').on('keyup', customerNameSearchTextbox_keyup); 
 
    //I did this because I was getting some weird sandbox errors leaving it as an 
 
    //attribute, but on an actual webpage (and not a snippet or fiddle) leaving 
 
    //this portion out and having the onkeyup="" attribute should be fine 
 
})

.toggle-helper { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <input type="text" id="customerNameSearchTextbox" class="form-control" placeholder="Customer" aria-describedby="basic-addon1" autocomplete="off" /> 
 
    <span class="toggle-helper" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">hi</span> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="customerNameUL"> 
 
    <li>Lorem ipsum.</li> 
 
    <li>Doloremque, quam.</li> 
 
    <li>Iure, vel!</li> 
 
    <li>Culpa, rerum!</li> 
 
    </ul> 
 
</div>