Question

如果我在搜索结果框外单击，如果输入不为空且结果为＆gt;我试图阻止jquery自动完成关闭搜索结果那是我的小提琴：

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

E.g。 .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"];

Answer 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"
 ];

单击外部时阻止关闭搜索结果框的jquery自动完成

1 个答案: