gpt4 book ai didi

jquery-ui - 如何使用 jqueryui 取消自动完成?

转载 作者:行者123 更新时间:2023-12-04 00:43:31 25 4
gpt4 key购买 nike

我有一个输入字段,它附加了一个 ajax 数据源自动完成。

我有一个用于输入字段的 keyup 处理程序,它会寻找有人按回车键,当他们这样做时会触发对搜索按钮的点击,ajax 会在另一个 div 中加载一些数据。

问题是如果这个人很快打字并按下回车键,自动完成仍然会弹出。

我尝试了以下方法:

  • 添加 $('#autocomplete').autocomplete('close')。这不起作用,大概是因为自动完成功能尚未打开。如果我输入,等待自动完成出现,然后按回车键,它会正确关闭。

  • 添加 $('#autocomplete').autocomplete('destroy')。这行得通,但如果我返回现场尝试其他搜索,自动完成功能将不再有效。

所以我想要的是一种方法来取消任何待处理的请求并关闭自动完成(如果它是打开的),但不会禁用或破坏它。

编辑:代码示例(不是我的真实代码,只是用来演示问题的 stub )。文件名为 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()));
});
});

演示: http://jsfiddle.net/dirtyd77/dMjRb/3/

关于jquery-ui - 如何使用 jqueryui 取消自动完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15623692/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com