所以我想出了这个脚本,ajax调用google的建议,JSONP返回搜索结果。我设法将结果排序,但我想实现jquery自动完成。我已经尝试过任何我能想到的方法,但没有任何结果。
这是一个工作小提琴:http://jsfiddle.net/YBf5J/ 这是脚本:
$(document).ready(function() {
$('#q').keyup(retrieve);
$('#q').focus();
$('#results').show('slow');
$("#q").autocomplete(parse, {
Height:100,
width:620,
noCache: false,
selectFirst: false
});
});
function retrieve() {
$.ajax({
type: "GET",
url: 'http://suggestqueries.google.com/complete/search?qu=' + encodeURIComponent($('#q').val()),
dataType: "jsonp",
jsonpCallback: 'parse'
});
}
var parse = function(data) {
var results = "";
for (var i = 0; i < data[1].length; i++) {
results += '<li>' + '<a href="#">' + data[1][i][0] + '</a>' + '</li>';
}
$('#results').html('' + results + '');
$('#results > li a').click(function(event) {
event.preventDefault();
$('#q').val($(this).html()).closest('form').submit();
});
}
这是简单的身体:
<body><input type="text" id="q"><div id="results"></div></body>
非常感谢任何帮助。 非常感谢,rallyboy。
答案 0 :(得分:2)
以下是使用Jquery-UI Auto完成的示例。从您的代码中获取,我所做的就是每次使用此代码更改数据时都会更新自动完成源。
var parse = function(data) {
var results = [];
for (var i = 0; i < data[1].length; i++) {
results.push(data[1][i][0]);
}
$('#q').autocomplete({
source: results
});
见小提琴
它仅使用基本CSS,但可以通过将其指向您想要的主题来更改。