点击时Glyphicon不会旋转(Glyphicon not spinning when clicked)

 我从未成为依赖私有方法（由开发人员用_标记）来实现功能的忠实粉丝，因为这可能会在未来的更新中破坏您的代码。 我检查了你提到的帖子中的所有答案，所有这些方法都有或多或少的问题所以我会尝试给你一个更标准的解决方案。 
 
 问题开始于使用data('ui-autocomplete')获取小部件实例，而自动完成插件公开一个调用$(selector).autocomplete('instance')的公共方法来实现同样的事情所以不要使用那。 
 
 接下来是您需要等待菜单打开并且呈现项目以选择您想要的项目的问题，这必须在事件中完成（请不要使用超时！）。 为此，您有autocompleteopen事件。 
 
 这是我第一个解决您问题的方法 
 
$(document).ready(function () {
    ...

    tag.on("autocompleteopen", function (event, ui) {
        // If there are suggestion results
        if (items.lenght > 0) {
            // Select the desired item here
        }
    });

    $('div').click(function () {
        var newVal = $(this).text();
        var oldVal = $('#tags').val();
        tag.val(oldVal + newVal);
        tag.autocomplete('search');         
    })
});
 
 在这种情况下，使用tag.autocomplete('instance')._trigger将无法正常工作。 虽然使用正确的数据触发事件，但菜单不会关闭，并且不会自动选择项目。 您应该在正确的项目上使用click事件。 
 
 还有一个问题需要解决，当您的用户在输入内部输入时，您可能希望禁用此功能，这可以通过变量轻松解决。 
 
 检查解决方案。 
 
 
 
 
 
  
$(document).ready(function() {
  var autoPick = false;
  var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport"];
  var tag = $('#tags');
  tag.autocomplete({
    source: aTags
  });
  tag.on("autocompleteopen", function(event, ui) {
    var items = tag.autocomplete('instance').menu.element.children();
    if (items.length > 0 && autoPick) {
      items.eq(0).trigger('click')
      autoPick = false;
    }
  });
  $('div').click(function() {
    var newVal = $(this).text();
    var oldVal = $('#tags').val();
    tag.val(oldVal + newVal);
    autoPick = true;
    tag.autocomplete('search');
  })
});
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
<input type='text' title='Tags' id='tags' />
 
 
 
 

I've never been a great fan of relying in private methods (marked with _ by the developer) to achieve functionality because this can break your code in future updates. I checked all the answers in the post you mention and all those methods have more or less issues so I will try to give you a more standard solution.
 
The problem begins with the use of data('ui-autocomplete') to get the widget instance while the autocomplete plugin expose a public method calling $(selector).autocomplete('instance') to achieve the same thing so don't use that.
 
Next is the issue that you'll need to wait for the menu to open and the items are rendered to pick the one you want and this must be done in a event (dont use timeouts please!!!). For this you have the autocompleteopen event.
 
This is my first solution of your problem
 
$(document).ready(function () {
    ...

    tag.on("autocompleteopen", function (event, ui) {
        // If there are suggestion results
        if (items.lenght > 0) {
            // Select the desired item here
        }
    });

    $('div').click(function () {
        var newVal = $(this).text();
        var oldVal = $('#tags').val();
        tag.val(oldVal + newVal);
        tag.autocomplete('search');         
    })
});
 
Using tag.autocomplete('instance')._trigger will not work correctly in this case. Although the event is triggered with the correct data the menu won't close and the item wont be automatically selected. You should use a click event on the correct item.
 
There is another problem you need to solve and is when your users are typing inside the input you probably want this functionality disabled, this can be easily solved with a variable. 
 
Check the solution.
 
 
 
 
 
  
$(document).ready(function() {
  var autoPick = false;
  var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport"];
  var tag = $('#tags');
  tag.autocomplete({
    source: aTags
  });
  tag.on("autocompleteopen", function(event, ui) {
    var items = tag.autocomplete('instance').menu.element.children();
    if (items.length > 0 && autoPick) {
      items.eq(0).trigger('click')
      autoPick = false;
    }
  });
  $('div').click(function() {
    var newVal = $(this).text();
    var oldVal = $('#tags').val();
    tag.val(oldVal + newVal);
    autoPick = true;
    tag.autocomplete('search');
  })
});
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
<input type='text' title='Tags' id='tags' />