Jquery UI 自动完成 JSON 数据解析

Question

嘿，我正在尝试让我的 Jquery UI 自动完成以接收 json 字符串，并让我只能从 json 中的第一个“名称”进行搜索，然后能够访问“图像”部分好吧（当它填充时，我在名称旁边插入一个图像）。

json 看起来像这样：

var availableData = [
   {"Name": "bob barker", "image": "./images/bbarker.png"},
   {"Name": "Jill bill", "image": "./images/jBill.png"},
   {"Name": "John Doe", "image": "./images/jdoe.png"},
   etc etc....

和自动完成脚本：

 $( "#autocomplete" ).autocomplete({
 source: availableData,
 dataType: "json"
 })

但我需要更改 jquery-ui-1.10.4.js 文件以便能够读取 json，因为它通常采用数组。

任何帮助都会很棒！

here 是一个示例，但我似乎无法让该示例与我的代码一起使用？

irvin-dominin-aka-edward 更新

_renderItem: function( ul, item ) {
    return $( "<li>" )
        .append( $( "<a>" ).text( item.label ) )
        .css({
              "background-image":"url('https://www.zzzzzz.com/photo?" + item.image + "')", 
              "background-repeat":"no-repeat",
              "background-position":"top left",
              "background-size":"30px 30px",
              "padding-left":"25px"
        })
        .appendTo( ul );
},

我无法获得“图像”（使用 item.image）值。我可以通过 item.label 获得“名称”值。

Answer 1

如果我理解正确，您可以使用 jQuery map 将您的起始项目数组或对象转换为新的项目数组，而不是使用 grep 应用输入过滤器。

当前过滤器存储在request、source函数参数中。

代码：

$(function () {
    var availableData = [{
        "Name": "bob barker",
        "image": "./images/bbarker.png"
    }, {
        "Name": "Jill bill",
        "image": "./images/jBill.png"
    }, {
        "Name": "John Doe",
        "image": "./images/jdoe.png"
    }]

    $('#personsearch').autocomplete({
        source: function (request, response) {
            var re = $.ui.autocomplete.escapeRegex(request.term);
            var matcher = new RegExp("^" + re, "i");
            response($.grep(($.map(availableData, function (v, i) {

                return {
                    label: v.Name,
                    value: v.Name,
                    image: v.image
                };
            })), function (item) {
                return matcher.test(item.value);
            }))

        }
    });
});

演示：http://jsfiddle.net/VZ9xF/