点击外部时防止jquery自动完成关闭搜索结果框答案

【问题标题】：Prevent jquery autocomplete from closing the search result box when clicking outside点击外部时防止jquery自动完成关闭搜索结果框
【发布时间】：2017-08-14 08:40:19
【问题描述】：

如果我在搜索结果框之外单击，如果输入不为空并且结果> 0，我试图阻止 jquery 自动完成关闭搜索结果。这就是我的小提琴：

http://jsfiddle.net/h16c0d67/

在搜索结果框外单击时，它已经保持打开状态，但如果我清除显然不想要的输入，它也会保持打开状态。已经有类似的问题了：JqueryUI Autocomplete prevent close on click outside

例如.dialog() 函数有类似 clickOutside: false

这是我的设置：

html:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
  <button id="clear-search" >Clear</button>
</div>

javascript：

 $(function () {
 $("#tags").autocomplete({
     source: availableTags,
     delay: 0,
     close:function(event, ui){
        if ( $('.ui-autocomplete > li').length > 0 ) {
             $("ul.ui-autocomplete, .ui-widget-content").filter(':hidden').show();
            } else {
        // I tried this:
        $('#tags').autocomplete( 'close' );
        $('ul.ui-autocomplete').remove();
        $('ul.ui-autocomplete').hide();
      } 
    }
 });
 });

$('#clear-search').on('click', function() { 
    $('#tags').val('');                                         
}); 

var availableTags = [
 "ActionScript",
 "AppleScript",
 "Asp",
 "BASIC",
 "C",
 "C++",
 "Clojure",
 "COBOL",
 "ColdFusion",
 "Erlang",
 "Fortran",
 "Groovy",
 "Haskell",
 "Java",
 "JavaScript",
 "Lisp",
 "Perl",
 "PHP",
 "Python",
 "Ruby",
 "Scala",
 "Scheme"];

【问题讨论】：

标签： javascript jquery html jquery-ui autocomplete

【解决方案1】：

也许不是最优雅的解决方案，但我认为它可以满足您的需求 - 只需检查输入的长度，如果 0 则调用 close。

添加为答案，因为评论太长了：

 $(function() {
   $("#tags").autocomplete({
     source: availableTags,
     delay: 0,
     close: function(event, ui) {
       var input_length = $('#tags').val().length;
       if (input_length !== 0) {
         console.log(input_length);
         $("ul.ui-autocomplete, .ui-widget-content").filter(':hidden').show();
       } else if (input_length === 0) {
         console.log("its 0 now!");
         $('#tags').autocomplete('close');
       }
     }
   });
 });

 $('#clear-search').on('click', function() {
   $('#tags').val('');
 });

 var availableTags = [
   "ActionScript",
   "AppleScript",
   "Asp",
   "BASIC",
   "C",
   "C++",
   "Clojure",
   "COBOL",
   "ColdFusion",
   "Erlang",
   "Fortran",
   "Groovy",
   "Haskell",
   "Java",
   "JavaScript",
   "Lisp",
   "Perl",
   "PHP",
   "Python",
   "Ruby",
   "Scala",
   "Scheme"
 ];

【讨论】：