jQuery自动建议示例 [英] jQuery autosuggest example

问题描述

我需要在我们的网站上实现自动提示"功能，但是它需要在一定数量的按键后重新查询每个按键(就像2以后的每个字符一样，都需要再次查询).因此，结果不是限制性搜索.例如，我见过的自动完成插件的工作方式如下:

I need to implement an "autosuggest" feature on our site but it needs to re-query the on every keystroke after a certain number of keys (like every character after 2 it would need to query again). So the result isn't a limiting search. For example, the autocomplete plugins I've seen work like the following:

[寻找县] 1.客户输入"CA"，第一个结果将返回"Canada"，"Cambodia"和"Camaroon" 2.客户继续输入并打"M"，新结果将仅在现有的3个结果中进行查询(仅产生柬埔寨"和"Camaroon"的结果)

[looking for a county] 1. customer types 'CA' and the first result would return 'Canada', 'Cambodia', and 'Camaroon' 2. customer continues to type and hits 'M' the new results would query within the only the existing 3 results (producing results of just 'Cambodia' and 'Camaroon')

我需要一个解决方案，该解决方案等同于在每次击键时查询我的数据源.我已经有了ajax调用，该调用将基于类型化"参数返回我的结果.例如(在上面的示例中)，它需要先进行ajax调用，并传递"ca"，如果客户继续在3个字符上键入传递"can"，依此类推.

I need a solution that would be the equivalent of querying my datasource on each keystroke. I already have the ajax call that will return my results based on the "typed" params. For example (in the above example), it would need to make an ajax call passing 'ca' first and if the customer kept typing passing 'can' on the 3 character and so forth.

谢谢.

推荐答案

jQuery UI自动完成插件将完成您想要的事情.

The jQuery UI autocomplete plugin will do what you want.

请参阅此演示 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");


}
        });

您可以使用下载构建器来获取自动完成示例.作为自动完成奖励的主题，您可以选择一个 themeroller 准备就绪的主题，或编辑一个主题并创建自己的主题.

You can use the download builder to get just the autocomplete example. As a bonus autocomplete is themeable and you can pick a themeroller ready theme or edit one and create your own.

这篇关于jQuery自动建议示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！