Jquery UI 自动完成:从一个数组的多个属性中搜索

问题描述

您好，我正在尝试让 jQuery UI 自动完成小部件工作，以便它从我的数组的多个属性中搜索匹配项(不仅仅是默认情况下所做的一个).

Hi I'm trying to get the jQuery UI autocomplete widget to work so that it searches for matches from multiple attributes of my array (not just one that it does by default).

我已经把他们的例子搞砸了，但是我仍然不确定如何解决这个问题.

I've messed around with their example, however I'm still unsure how to solve this.

http://jsfiddle.net/FUZPN/

这是我在 script

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        other: "9834275 9847598023 753425828975340 82974598823"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        other: "98 83475 9358 949078 8 40287089754 345 2345"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        other: "49857 2389442 573489057 89024375 928037890"
    }

我想要的是，如果你输入write"，第一个元素应该在自动完成中弹出，同样如果你输入jq"应弹出前 2 个元素.

What I'm seeking is that if you type "write", the first element should pop up in autocomplete, similarly if you type "jq" the first 2 elements should pop up.

根据文档:

数组:数组可用于本地数据.支持两种格式:

Array: An array can be used for local data. There are two supported formats:

• 一个字符串数组:[ "Choice1", "Choice2";]

具有标签和值属性的对象数组:[ { label: Choice1", value: value1";}, ... ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

label 属性显示在建议菜单中.当用户选择一个项目时，值 将被插入到输入元素中.如果只指定了一个属性，它将用于两个属性，例如，如果您只提供 value 属性，value 也将用作 标签.

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

我如何(硬)编码它以便源使用 2 个标签(label 和 desc?)而不是一个 >标签?

How do I (hard)code it so the source uses 2 labels (label and desc?) instead of the one label?

(抱歉，我搜索了很多类似的问题，但它们都针对多个来源，因为我只有 1 个数组，所以不在这里.是吗?)

推荐答案

自动完成接受第三种类型的来源，一个函数，可以以您认为合适的任何方式提供数据:

Autocomplete accepts a third type of source, a function, that can provide data any way you see fit:

第三种变体，回调，提供了最大的灵活性并且可以用于将任何数据源连接到自动完成.回调得到两个参数:

The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:

• 一个请求对象，具有单个 term 属性，它指的是当前文本输入中的值.例如，如果用户输入城市字段中的new yo"，自动完成术语将等于new yo".
• 一个响应回调，它需要一个参数:向用户建议的数据.此数据应根据提供的术语，并且可以采用上述任何格式简单的本地数据.提供自定义源时很重要回调以处理请求期间的错误.您必须始终调用即使遇到错误，也可以响应回调.这确保了小部件始终具有正确的状态.

这意味着你可以写这样的东西

This means that you can write something like this

$( "#project" ).autocomplete({
    source: function (request, response) {
        // request.term is what you typed
        console.log(request.term); 

        //call response with an array containing the filtered data
        response([...]); 
    }
});

解决您问题的简单方法:

A simple solution to your problem:

function lightwell(request, response) {
    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);
}

$( "#project").autocomplete({
    source: lightwell
});

还有一个小提琴 http://jsfiddle.net/FUZPN/5/

这篇关于Jquery UI 自动完成:从一个数组的多个属性中搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2