Я хочу реализовать функцию для автозаполнения Textbox. В настоящее время я использую автозаполнение jQuery, но я не могу реализовать функциональность, связанную с задержкой поиска; Например, если я ищу «Новый», у меня будет список автозаполнения, имеющий [«Нью-Йорк», «Новый Южный Мемфис» .....] Теперь, если я нажму «S» и сразу ударил стрелку вниз, тогда я в конечном итоге выберите первый элемент, то есть «Нью-Йорк», а не получите результаты для городов, начинающихся с «Нового S». [Выполняется вызов веб-службы поисковых городов, начинающихся с «Новый S»] Я хочу достичь, чтобы заблокировать стрелку вниз до получения результатов. Если кто-нибудь может объяснить, что я должен сфокусировать для достижения этой функции, или это невозможно из-за асинхронного вызова веб-службы?Autocomplete Improvement
$(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>
\t <head>
\t \t <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css">
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
\t \t <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
\t \t <script type="text/javascript" src="custom.js"></script>
\t \t
\t \t <style>
\t \t \t \t .fixed-height {
\t \t \t \t \t padding: 1px;
\t \t \t \t \t max-height: 200px;
\t \t \t \t \t overflow: auto;
\t \t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t \t <div class="ui-widget">
\t \t \t \t \t \t <label for="tags">Autocomplete: </label>
\t \t \t \t \t \t <input id="locations" type="text" size="50"/>
\t </div>
</body>
</html>
вы можете попробовать, добавив это в первую строку прослушивания события keydown $ ('# locations'). Autocomplete ("destroy"); – NightsWatch