自动完成改进
[英]Autocomplete Improvement
问题描述
I want to implement a feature for Textbox Autocomplete. 
我想为文本框自动完成功能。 Currently I using jQuery Autocomplete but I am unable to implement a functionality which is related to search delay; 目前，我使用的是jQuery Autocomplete，但无法实现与搜索延迟有关的功能； For example if I search for "New ", I will have an autocomplete list having [ 'New York','New South Memphis' .....] Now, if I press "S" and immediately hit down arrow then I end up with selecting the first item ie 'New York' rather than getting results for cities starting with "New S". 例如，如果我搜索“ New”，我将有一个包含['New York'，'New South Memphis'.....]的自动填充列表。现在，如果我按“ S”并立即按下箭头，那么我结束选择第一个项目（即“纽约”），而不是获取以“ New S”开头的城市的结果。 [A Web service call of search cities starting with 'New S' gets triggered] What I want to achieve is to block the down arrow till the results are retrieved. [以'New S'开头的搜索城市的Web服务调用被触发]我要实现的是阻止向下箭头，直到检索到结果。 If anyone can explain what I should focus to achieve this feature or is it not possible due to asynchronous nature of the Web Service call ? 如果有人可以解释实现该功能的重点，还是由于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.