바깥 쪽을 클릭하면 jquery 자동 완성이 검색 결과 상자를 닫지 않게합니다.

Question

입력 결과가 비어 있거나 결과가> 0 인 경우 검색 결과 상자 바깥을 클릭하면 jquery 자동 완성이 검색 결과를 닫지 못하게하려고했습니다. 뿐만 아니라, 내가 분명히 원하지 않는 입력을 취소하는 경우, 검색 결과 상자 외부를 클릭 할 때 이미 열려

http://jsfiddle.net/h16c0d67/

: 그건 내 바이올린입니다. 이미 비슷한 질문이 있습니다. JqueryUI Autocomplete prevent close on click outside

예 :

거짓 내 설정이다 : 다음 .dialog() 함수는 clickOutside 같은 STH있다

HTML :

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

자바 스크립트 :

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

: 그것은 코멘트 너무 긴으로

답변으로 추가