如何更改自动填充中的结果过滤器?

时间:2011-05-18 09:59:26

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

我不想进行文字匹配,而是通过正则表达式选择结果。

我可以覆盖自动填充的默认行为来完成此操作,还是需要备用结构?

3 个答案:

答案 0 :(得分:8)

有一种内置方法可以做到这一点:只为自动完成小部件中的source选项提供一个函数:

var items = ['Foo', 'Bar', 'Hello', 'Goodbye', '1234'];


$("#autocomplete").autocomplete({
    source: function(request, response) {
        // The term the user searched for;
        var term = request.term;

        // Extract matching items:
        var matches = $.grep(items, function(item, index) {
            // Build your regex here:
            return /\d+/.test(item);
        });

        // let autocomplete know the results:
        response(matches);
    }
});

http://jsfiddle.net/RSyrX/

请注意,由于我使用的简单正则表达式,此示例将始终返回“1234”。更有用的可能是根据术语构建正则表达式(也可能)。

这实际上与小部件本身过滤结果的方式非常相似。查看this line以了解过滤器功能,并查看this line如果您将数组作为source选项提供,请查看它的调用方式。

答案 1 :(得分:1)

我创建了一个示例,其中只显示标签中包含字符串'jQuery'的结果:

var projects = [
    {
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"},
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"},
{
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"}
];

$("input").autocomplete({
    source: projects
}).data("autocomplete")._renderItem = function(ul, item) {

    // this is where you can implement your regex
    if (item.label.indexOf("jQuery") !== -1) {
        return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
    }
};

Demo here.

答案 2 :(得分:1)

Ya你可以覆盖jQueryUI的自动完成的默认行为。在您的控制器中,您应该编写服务器端逻辑以生成结果集。默认情况下,jQuery自动完成使用q作为参数。使用它可以获取值并生成将成为列表的结果集。我想这会给你一个想法。自动填充只显示每个键盘上的结果。你应该注意显示逻辑