javascript jqueryUi 自动完成 - 自定义数据和显示

jqueryUi autocomplete - custom data and display

提问by Lorraine Bernard

My full code is here: http://jsfiddle.net/HfNk9/13/

我的完整代码在这里：http: //jsfiddle.net/HfNk9/13/

I am looking to this example jqueryUi autocomplete - custom data and display.

我正在寻找这个示例jqueryUi 自动完成 - 自定义数据和显示。

Let's suppose the object projects is different and it looks like this:

让我们假设对象项目是不同的，它看起来像这样：

project = [
    {
        name: 'bar',
        value: 'foo',
        imgage: 'img.png'
    }
]

If I set source = projectthe autocomplete refers to project.valueand not project.name.
How should I change this behaviour?

如果我设置source = project自动完成是指project.value而不是project.name.
我应该如何改变这种行为？

---

---

var autocomplete = function(element, data) {
    var fixtures = [
        {
        avatar: "http://www.placekitten.com/20/20",
        name: 'aaaaaaaaa',
        value: 'bbbbbbbbb'}
    ];

    element.autocomplete({
        minLength: 3,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(fixtures, function(value) {
                return matcher.test(value.name);
            }));
        },
        create: function() {
            console.log(fixtures)
            element.val(fixtures.name);
        },
        focus: function(event, ui) {
            element.val(ui.item.name);
            return false;
        },
        select: function(event, ui) {
            element.val(ui.item.name);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li></li>')
            .data('item.autocomplete', item)
            .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
            .appendTo(ul);
    };
};

autocomplete($('#auto'));

My full code: http://jsfiddle.net/HfNk9/13/

我的完整代码：http: //jsfiddle.net/HfNk9/13/

回答by Andrew Whitaker

You need to filter on a different property than the autocomplete widget searches on by default (as you've noticed it's nameor valuewhen using a source array with objects).

您需要过滤与默认情况下自动完成小部件搜索不同的属性（正如您所注意到的那样，name或者value在使用带有对象的源数组时）。

You can use a function instead of an array as the source and perform your own filtering that way:

您可以使用函数而不是数组作为源并以这种方式执行您自己的过滤：

element.autocomplete({
    minLength: 3,
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(fixtures, function(value) {
            return matcher.test(value.name);
        }));
    },
    create: function() {
        console.log(fixtures)
        element.val(fixtures.name);
    },
    focus: function(event, ui) {
        element.val(ui.item.name);
        return false;
    },
    select: function(event, ui) {
        element.val(ui.item.name);
        return false;
    }
}).data('autocomplete')._renderItem = function(ul, item) {
    return $('<li></li>')
        .data('item.autocomplete', item)
        .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
        .appendTo(ul);
};

Example:http://jsfiddle.net/QzJzW/

示例：http : //jsfiddle.net/QzJzW/

回答by EyalAr

You should use the selectproperty:

您应该使用该select属性：

$("...").autocomplete({
    source: ...,
    select: function( event, ui ) { //when an item is selected
        //use the ui.item object
        alert(ui.item.name)
        return false;
    }
});

回答by White Elephant

The answer is in the source code to the page you've linked to. If you want to use the value of nameinstead of valuethen you would do something like this:

答案在您链接到的页面的源代码中。如果你想使用的值name而不是value那么你会做这样的事情：

$( "#input" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    },
    select: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    }
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.name + "</a>" )
        .appendTo( ul );
};