我有具有连接到它的数据AJAX源自动填充的输入域。
我有一个输入字段，看起来有人按enter当他们这样做它触发搜索按钮，它的ajax加载在另一个DIV一些数据点击一个KEYUP处理程序。
问题是，如果这个人是快速和类型并按下回车，自动完成仍然弹出。
我曾尝试以下：
$('#autocomplete').autocomplete('close')。这是不行的，大概是因为自动完成尚未打开。如果I型，等待自动完成上来，然后按ENTER键，它正确地关闭它。$('#autocomplete').autocomplete('destroy')。这工作，但这时如果我回到现场，尝试其他搜索，自动完成不再工作。所以，我要的是一个方法来取消任何挂起的请求，并关闭自动完成，如果它是开放的，但没有禁用或摧毁它。
编辑：代码示例（不是我真正的代码，只是存根证明这个问题）。文件名是scratch.php
<?php
// Stub for search results
if ($_GET['search'])
{
print "Search results for ".$_GET['search']." here";
exit();
}
// Simulated DB search
if ($_GET['term'])
{
print '[{"label":"A 1"},{"label":"A 2"},{"label":"A 3"},{"label":"A 4"}]';
exit();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script language='javascript'>
$(document).ready(function() {
$('#searchfor').on('keyup',function(e) {
if (e.which == 13) $('#search').trigger('click');
});
$('#searchfor').autocomplete({
source: "/scratch.php",
minLength: 2,
select: function( event, ui ) {
$('#searchfor').val(ui.item.value);
$('#search').trigger('click');
}
});
$('#search').on('click',function() {
try
{
// Cancel any pending autocompletes without destroying the autocomplete completely here.
// This currently doesn't work
$('#searchfor').autocomplete("close");
}
catch(e)
{
// Do nothing except prevent an error
}
$('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
});
});
</script>
</head>
<input id='searchfor' /> <input id='search' type='button' value='search' />
<div id='results'></div>
</html>
去这一个方法是使input失去焦点。您可以通过使用.blur()做到这一点。如何做这样的事情：
JAVASCRIPT：
$(document).ready(function() {
$('#searchfor').on('keyup',function(e) {
if (e.which == 13) $('#search').trigger('click');
$('#searchfor').blur();
});
$('#searchfor').autocomplete({
source: "/scratch.php",
minLength: 2,
select: function( event, ui ) {
$('#searchfor').val(ui.item.value);
$('#search').trigger('click');
}
});
$('#search').on('click',function() {
$('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
});
});
但是：四联zxsw POI
假设你有一个网页应用程序。
这将赶上输入将触发提交键或任何事件。
<form onsubmit="return false;">...<form>在jQuery UI的当前版本，你可以使用搜索事件做一些检查是由数据源请求之前
$('input').blur().focus();
do something with $('input').val();
https://api.jqueryui.com/autocomplete/#event-search
let autocompleteData = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
333333,
222222,
111111,
123456
];
$('input').autocomplete({
source: autocompleteData,
search:function(e,u){
let value = e.target.value;
// stops the event from continuing if value integer.
if( Number.isInteger(parseInt(value)) ){
e.preventDefault();
}
},
});