Il mio codice completo è qui: http://jsfiddle.net/HfNk9/13/jQueryUI completamento automatico - dati personalizzati e visualizzazione
Sto cercando di questo esempio jqueryUi autocomplete - custom data and display.
Supponiamo progetti oggetto è diverso e sembra che questo:
project = [
{
name: 'bar',
value: 'foo',
imgage: 'img.png'
}
]
Se ho impostato source = project
il completamento automatico si riferisce a project.value
e non project.name
.
Come dovrei cambiare questo comportamento?
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'));
mio codice completo: http://jsfiddle.net/HfNk9/13/
+1 Ottima spiegazione. Grazie mille. –
Un'altra cosa, il tag "a" nel rendering è necessario, senza di esso cose come il metodo di messa a fuoco o altre non funzioneranno (nessun set di ui.item). – gpichot
@andrewWhitaker ben fatto signore. – Bnjmn