【问题标题】:jQuery autosuggest examplejQuery 自动建议示例
【发布时间】:2010-05-26 08:24:52
【问题描述】:

我需要在我们的网站上实现“自动建议”功能,但它需要在每次击键后重新查询一定数量的键(就像 2 之后的每个字符都需要再次查询)。所以结果不是限制性搜索。例如,我见过的自动完成插件的工作方式如下:

[寻找县] 1. 客户类型“CA”,第一个结果将返回“Canada”、“Cambodia”和“Camaroon” 2. 客户继续键入并点击“M”,新结果将在现有的 3 个结果中查询(仅生成“Cambodia”和“Camaroon”的结果)

我需要一个相当于在每次击键时查询我的数据源的解决方案。我已经有了 ajax 调用,它将根据“类型化”参数返回我的结果。例如(在上面的示例中),它需要先进行一个 ajax 调用并传递“ca”,如果客户继续在第 3 个字符上键入传递“can”等等。

谢谢。

【问题讨论】:

    标签: jquery jquery-plugins


    【解决方案1】:

    jQuery UI 自动完成插件会做你想做的事。

    查看此演示http://jqueryui.com/demos/autocomplete/#remote-jsonp

    演示代码:

    $("#city").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "http://ws.geonames.org/searchJSON",
                        dataType: "jsonp",
                        data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: request.term
                        },
                        success: function(data) {
                            response($.map(data.geonames, function(item) {
                                return {
                                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                    value: item.name
                                }
                            }))
                        }
                    })
                },
                minLength: 2,
                select: function(event, ui) {
                    log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
                },
                open: function() {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function() {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    
    
    }
            });
    

    您可以使用download builder 来获取自动完成示例。作为奖励,自动完成是可主题化的,您可以选择 themeroller 准备好的主题或编辑并创建自己的主题。

    【讨论】:

      【解决方案2】:

      jqueryui 的自动完成功能每次都会发送完整的字符串,所以你可以用它做你想做的事。如果有帮助,您还可以编辑事件以保存最后一个搜索字符串并将其与新请求一起发送。

      【讨论】:

      • 谢谢,我今天会看看那个jqueryui。我最初忽略了它,因为那个库变得有点重,我们一直在有意识地努力优化我们的页面加载时间
      • 好吧,只要你可以绑定到更改或发送事件,上面的“查询跟踪”想法仍然有效。
      猜你喜欢
      • 2012-01-18
      • 1970-01-01
      • 1970-01-01
      • 2011-06-08
      • 1970-01-01
      • 1970-01-01
      • 2016-09-22
      • 1970-01-01
      相关资源
      最近更新 更多