实现jQuery自动完成功能

Question

实现jQuery自动完成功能

4

因此，我编写了这个脚本来调用谷歌的建议，并通过JSONP返回搜索结果。我已经成功使结果排序，但我想使用jquery自动完成。我尝试了我能想到的任何可能性，但没有得到任何结果。

这里是一个工作的fiddle示例：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。

- jQuerybeast

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Declan Cook · Accepted Answer

这里是使用Jquery-UI自动完成的示例。从您的代码中获取，我所做的只是使用以下代码每次数据更改时更新自动完成源。

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
});

请查看fiddle

http://jsfiddle.net/WUcpC/1/

它只使用了基本的CSS，但可以通过将其指向您想要的任何主题来进行更改。