远程设置自动完成的来源[重复]答案

【问题标题】：Setting the source of autocomplete remotely [duplicate]远程设置自动完成的来源[重复]
【发布时间】：2012-09-10 14:32:06
【问题描述】：

可能重复：
jquery autocomplete this.source is not a function error

我有一个自动完成功能，我想将它连接到我的 API 以返回所有客户帐号。问题是我的 API 返回一个对象：AccountNumber、InvoiceNumber、Name、Address 等。当我尝试将我的来源设为 AccountNumber 时，如下所示：

$.getJSON('/api/Customers', function(data) {
    $("#AccountNumber").autocomplete({
        source: data.AccountNumber,
        minLength: 4
    });
});

我得到了这个错误：

Uncaught TypeError: Property 'source' of object #<Object> is not a function

任何想法我在这里做错了什么？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

由于回调返回一个对象，您必须拉取数据并将其放在一个数组中。只要data 是一个账户对象数组，你就可以试试这个：

$.getJSON('/api/Customers', function(data) {
    var acctNums = [];
    for(a in data) {
        acctNums.push(data[a].AccountNumber);
    }   

    $("#AccountNumber").autocomplete({
        source: acctNums,
        minLength: 4
    });
});

另一种选择是只添加一个不同的请求路由，该路由只会返回一组客户帐号。这样你就可以这样传递它：

$.getJSON('/api/Customers/AccountNums', function(data) {
    $("#AccountNumber").autocomplete({
        source: data,
        minLength: 4
    });
});

最后，你可以让jQuery UI plugin handle the calls。您需要创建一个不同的请求路由，该路由仅为自动完成返回一组 JSON 对象（每个都包含 value 和 label 属性）。然后只需使用路由的绝对或相对 URL 即可获取数据。下面是一个小例子：

$("#AccountNumber").autocomplete({
    // This GET Request returns an Array of Objects used for Auto-Complete:
    // [ { label: "Choice1", value: "value1" }, ... ]
    source: '/api/Customers/AccountNumsAuto',
    minLength: 4
});

【讨论】：

【解决方案2】：

jQuery UI 自动完成的源属性必须是：

结果数组：
source : ["string1","string2","string3","string4"]
一个字符串（处理查询的远程PHP页面的url），这将触发对该页面的ajax请求，参数名为term，其中包含搜索值：
@987654324 @
使用 2 个参数 request 和 response 调用的函数。第一个包含搜索的值 (request.term)，第二个包含一个您必须用值填充的对象。

您应该阅读 jQuery UI documentation。
在您的情况下，您可以将您的 JSON 转换为结果数组。

【讨论】：