Question

嘿所有我想让我的Jquery UI自动完成以获取json字符串并让我只能从第一个＆＃34; Name＆＃34;在json然后能够访问＆＃34;图像＆＃34;部分也是（我在填充时插入名称旁边的图像）。

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

我无法获得＆＃34;图像＆＃34; （使用item.image）值..我可以得到＆＃34; name＆＃34;通过 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/

Jquery UI自动完成JSON数据解析

1 个答案: