个人中心
gpt4 book ai didi

javascript - 实现 jQuery 自动完成

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:21:36 24 4
gpt4 key购买 nike

所以我想出了这个ajax调用google的建议，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>

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

最佳答案

这里是一个使用 Jquery-UI Auto complete 的例子。从您的代码中获取，我所做的就是每次使用此代码更改数据时更新自动完成源。

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

关于javascript - 实现 jQuery 自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6582949/

24 4 0
文章推荐： javascript - jQuery 源代码中的 indexOf.call 与 array.indexOf
文章推荐： javascript - 文本区域自动展开
文章推荐： ios - 云通过 cloudKit 或解析方案数据
文章推荐： javascript - 函数继承中的单元测试私有(private)方法
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com