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

I tried to prevent jquery autocomplete from closing the search result if I click outside of the search result box, if the input is not empty and if the result is > 0. That's my fiddle:

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

http://jsfiddle.net/h16c0d67/

It already stays open when clicking outside the search result box, but also if I clear the input which I obviously don't want. There is already a similar question: JqueryUI Autocomplete prevent close on click outside

在搜索结果框外单击时它已经保持打开状态,但是如果我清除了我显然不想要的输入。已经存在类似的问题:JqueryUI Autocomplete防止在外部点击关闭

E.g. the .dialog() function has sth like clickOutside: false

例如。 .dialog()函数有点像clickOutside:false

That's my setup:

这是我的设置:

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

1 个解决方案

#1

Perhaps not the most elegant solution, but I think it does what you wanted - just checks the length of the input, and if 0 calls close.

也许不是最优雅的解决方案,但我认为它可以做你想要的 - 只需检查输入的长度,如果0调用关闭。

Adding as an answer as it is too long for a comment:

添加作为答案,因为评论太长了:

 $(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"
 ];

#1