Question

我正在使用JQuery UI自动完成插件（cached version）和JQuery-UI 1.11.1

由于我使用的JSON中的一些服务器端更改作为源代码，我需要调整我的代码。

以下是我的JSON示例：

[{
        "name": "Varedo"
    }, {
        "name": "Varena"
    }, {
        "name": "Varenna"
    }, {
        "name": "Varese"
}]

由具有此样式的网址生成： [URL] /？名称=瓦尔

由于GET变量与默认变量（“term”）不同，我已根据建议here调整了自定义请求的代码：

$(function () {
  var cache = {};
  $("#searchTextField").autocomplete({
    minLength: 3,
    source: function (request, response) {
        var term = request.term;

        if (term in cache) {
            response(cache[term]);
            return;
        }

        $.getJSON("[url]", {
            name: request.term
        }, function (data, status, xhr) {
            cache[term] = data;
            response(data);
        });
    }
  });
});

但是我还需要调整代码以使用自定义JSON值（默认为“value”http://api.jqueryui.com/autocomplete/#option-source），在我的例子中是“name”（从JSON可以看出）

我该怎么做？

目前这是我从自动完成中获得的：

enter image description here

所以我想我以某种方式给出了JS Objects的响应，而不是字符串。

提前致谢。

Answer 1

目前，您正在将响应保存到cache对象中，该对象不是jQuery UI自动完成的有效格式。您应该将数据转换为可自动完成的可摘定的正确格式。

要么传递一个字符串数组，要么传递一个具有标签和值属性的对象数组。

由于响应只包含名称属性，您可以使用jQuery map()方法将其转换为字符串数组，并将其保存在cache变量中，如下所示：

$("#searchTextField").autocomplete({
    minLength: 3,
    source: function (request, response) {
        var term = request.term;
        if (term in cache) {
            response(cache[term]);
            return;
        }

        $.getJSON("[url]", {
            name: request.term
        }, function (data, status, xhr) {
            cache[term] = $.map(data, function (obj) { // returns array of strings
                return obj.name
            });
            // return the new array rather than original response
            response(cache[term]);
        });
    }
});

如何使用JQueryi UI自动完成功能在JSON中拥有自定义值？

1 个答案: