如何取消jqueryui的自动完成功能？
[英]How do I cancel autocomplete with jqueryui?
问题描述
I have an input field which has an ajax data source autocomplete attached to it. 
我有一个输入字段，其中附加了一个ajax数据源自动完成功能。
I have a keyup handler for the input field, which looks for someone pressing enter and when they do it triggers a click on the search button, which ajax loads some data in another div. 我有一个用于输入字段的键入处理程序，该处理程序查找有人按下Enter键的行为，当他们这样做时，它会触发对搜索按钮的单击，Ajax会在另一个div中加载一些数据。
The problem is that if the person is quick and types and presses enter, the autocomplete still pops up. 问题是，如果此人很快，然后键入并按Enter，则自动完成功能仍会弹出。
I have tried the following: 我尝试了以下方法：
Adding
$('#autocomplete').autocomplete('close').添加$('#autocomplete').autocomplete('close')。 This doesn't work, presumably because the autocomplete isn't open yet.这不起作用，大概是因为自动完成功能尚未打开。 If I type, wait for the autocomplete to come up, then press enter, it closes it correctly. 如果输入，请等待自动完成提示，然后按Enter键，它将正确关闭。 Adding
$('#autocomplete').autocomplete('destroy').添加$('#autocomplete').autocomplete('destroy')。 This works, but then if I go back to the field to try another search, the autocomplete no longer works.此方法有效，但是如果我返回该字段尝试其他搜索，则自动完成功能将不再起作用。
So what I want is a way to cancel any pending requests and close the autocomplete if it's open, but without disabling or destroying it. 因此，我想要的是一种取消所有未完成的请求并关闭自动完成功能（如果已打开）的方法，但不会禁用或销毁它。
EDIT: Code sample (not my real code, just stubs to demonstrate the issue). 编辑：代码示例（不是我真正的代码，只是存根以演示问题）。 Filename is scratch.php 文件名是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>
3 个解决方案
解决方案1
4 已采纳 2013-03-25 21:41:18
One way to go about this is to make the input lose focus. 一种解决方法是使input失去焦点。 You can do this by using .blur() . 您可以使用.blur()做到这一点。 How about doing something like this: 如何做这样的事情：
JAVASCRIPT: 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()));
});
});
DEMO: http://jsfiddle.net/dirtyd77/dMjRb/3/ 演示： http : //jsfiddle.net/dirtyd77/dMjRb/3/
解决方案2
0 2016-01-07 11:49:11
assuming you have a one page app. 假设您有一个单页应用程序。
- you can wrap the input with 您可以使用
<form onsubmit="return false;">...<form>
this will catch the enter key or any event that will trigger submit. 这将捕获Enter键或任何触发提交的事件。
- then, you can bind the submit event yourself and do: 然后，您可以自己绑定Submit事件并执行：
$('input').blur().focus(); do something with $('input').val();
解决方案3
0 2019-02-06 18:12:17
In the current verion of jQuery UI you can use the search event to do some checks before the request to the data source is made 在当前版本的jQuery UI中，您可以使用search事件在对数据源进行请求之前进行一些检查
https://api.jqueryui.com/autocomplete/#event-search 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(); } }, });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.