如果我在搜索结果框之外单击,如果输入不为空并且结果> 0,我试图阻止jquery自动完成关闭搜索结果。这是我的 fiddle :
当单击搜索结果框外部时,它已经保持打开状态,而且如果我清除了我显然不想要的输入,它也会保持打开状态。已经有类似的问题: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"];
最佳答案
也许不是最优雅的解决方案,但我认为它满足了您的要求 - 只需检查输入的长度,如果 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"
];
关于javascript - 防止 jquery 自动完成在单击外部时关闭搜索结果框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42948159/