实现 jQuery 自动完成

发布于 2024-11-18 16:03:11 字数 1298 浏览 1 评论 0原文

所以我想出了这个脚本，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>

非常感谢任何帮助。非常感谢，拉力男孩。

原文

So I came up with this script that ajax calls google's suggestions and JSONP returns the search results. I managed to make the results sorted but I'd like to implement jquery autocomplete instead. I've tried any possible way I could think of but haven't got any results.

Here is the a working fiddle: http://jsfiddle.net/YBf5J/
and here is the script:

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

}

And here's the simple body:

<body><input type="text" id="q"><div id="results"></div></body>

Any help is really appreciated.
Thanks alot, rallyboy.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吖咩 2024-11-25 16:03:11

以下是使用 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，但可以通过将其指向您想要的任何主题来更改。

Here is an example of using the Jquery-UI Auto complete. Taken from your code, all i did was update the auto complete source every time the data changes using this code.

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

See fiddle

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

It uses just the base CSS but that can be changed by pointing it at which ever theme you want.

回复收藏 0 原文

~没有更多了~