自动完成改进
[英]Autocomplete Improvement
问题描述
我想为文本框自动完成功能。 目前，我使用的是jQuery Autocomplete，但无法实现与搜索延迟有关的功能； 例如，如果我搜索“ New”，我将有一个包含['New York'，'New South Memphis'.....]的自动填充列表。现在，如果我按“ S”并立即按下箭头，那么我结束选择第一个项目（即“纽约”），而不是获取以“ New S”开头的城市的结果。 [以'New S'开头的搜索城市的Web服务调用被触发]我要实现的是阻止向下箭头，直到检索到结果。 如果有人可以解释实现该功能的重点，还是由于Web Service调用的异步性质而无法实现？
$(document).ready(function() { $("#locations").keydown(function() { var keyword = $("#locations").val(); var url = 'http://autocomplete.wunderground.com/aq?format=json&cb=myCallbackFn&query=' + keyword; $.ajax({ type: 'GET', url: url, async: true, dataType: 'jsonp', error: function(e) { console.log(e.message); } }); }); }); var myCallbackFn = function(data) { var cities = []; for (i = 0; i < data.RESULTS.length; i++) { if (data.RESULTS[i].type == 'city') { cities.push(data.RESULTS[i].name); } } $("#locations").autocomplete({ source: cities }).autocomplete("widget").addClass("fixed-height"); }
<html> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> <script type="text/javascript" src="custom.js"></script> <style> .fixed-height { padding: 1px; max-height: 200px; overflow: auto; } </style> </head> <body> <div class="ui-widget"> <label for="tags">Autocomplete: </label> <input id="locations" type="text" size="50"/> </div> </body> </html>
1 个解决方案
解决方案1
0 2015-10-02 21:07:23
完成此操作的一种方法是，在激发新的GET请求时删除所有自动完成建议，或者设置一个标志以忽略向下箭头按键，直到请求解决为止。
需要改进导航列表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.