Question

我想为Textbox Autocomplete实现一项功能。目前我使用jQuery Autocomplete，但我无法实现与搜索延迟相关的功能;例如，如果我搜索“新”，我将有一个自动完成列表，其中包含['New York'，'New South Memphis'..... 现在，如果我按“S”并立即按下箭头，那么我最终会选择第一个项目，即“纽约”而不是获得以“新S”开头的城市的结果。 [以“新S”开头的搜索城市的Web服务调用被触发] 我想要实现的是阻止向下箭头直到检索结果。如果有人能够解释我应该关注什么来实现这个功能，或者由于Web服务调用的异步特性而无法解决？

$(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>

Answer 1

完成此操作的一种方法是在触发建议的新GET请求时删除所有自动完成建议，或者设置一个标志以忽略向下箭头按键，直到请求解决。

自动完成改进

1 个答案: