Jquery UI自动完成JSON数据解析

嘿，我正在尝试让我的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，因为它通常在数组中

任何帮助都会很好

一个例子可能是，但我似乎不能让这个例子与我的代码一起工作

欧文·多米尼·阿卡·爱德华的更新

_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 );
},

\u renderItem：功能（ul，项目）{
返回$（“
”）
.append（$（“”）.文本（item.label））
.css({
“背景图像”：“url（'https://www.zzzzzz.com/photo?“+item.image+”）“，
“背景重复”：“不重复”，
“背景位置”：“左上角”，
“背景尺寸”：“30px 30px”，
“左侧填充”：“25px”
})
.附录（ul）；
},

---

我无法获取“image”（使用item.image）值。。我可以通过执行项来获得“name”值。label

如果我理解正确，您可以使用jQuery将起始项数组或对象转换为新的项数组，而不必使用

当前过滤器存储在

请求

功能参数中

代码：

---

演示：

一把小提琴将有助于回答您的问题我不知道您试图实现什么，但数组元素应该具有

值
和
标签
属性。请查看我的OP update以获取示例。这很接近，但我需要能够在填充名称时获取图像数据。。。请检查我的OP以了解我正在谈论的代码。我更改了您的代码以反映所需的数据，以便在.js文件中检索它。图片：v.image
$(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);
            }))

        }
    });
});