Autocomplete Improvement
Question
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; 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". [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. 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 ?
$(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 answers
solution1
0 2015-10-02 21:07:23
完成此操作的一种方法是，在激发新的GET请求时删除所有自动完成建议，或者设置一个标志以忽略向下箭头按键，直到请求解决为止。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.