My full code is here: http://jsfiddle.net/HfNk9/13/
I am looking to this example jqueryUi autocomplete - custom data and display .
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 = project
the autocomplete refers to project.value
and not project.name
.
How should I change this behaviour?
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/
You need to filter on a different property than the autocomplete widget searches on by default (as you've noticed it's name
or value
when using a source array with objects).
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/
You should use the select
property:
$("...").autocomplete({
source: ...,
select: function( event, ui ) { //when an item is selected
//use the ui.item object
alert(ui.item.name)
return false;
}
});
The answer is in the source code to the page you've linked to. If you want to use the value of name
instead of value
then you would do something like this:
$( "#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 );
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.