Question

我有一个工作下拉列表，可以在单击文本框时显示，但希望它始终显示在keyup上。我有keyup功能，但你仍然需要在键入后点击以使下拉显示。

＆＃13;

        //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>
            
        };

＆＃13;

        <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>

＆＃13;

我认为我的困惑在于要调用的事件，要分配的类或要调用的事件。上面的提醒显示我到达了我想要的位置，只需要替换下面的行以使customerNameUL显示。

Answer 1

我不得不改变一些代码，但这里的基础知识应该有效。如果您有任何问题，请告诉我。

＆＃13;

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
})

＆＃13;

.toggle-helper {
  display: none;
}

＆＃13;

<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>

＆＃13;

keyup上的Bootstrap下拉列表

1 个答案: