Нужно , чтоб при наборе символов в инпут , выбивало результаты поиска по json массиву, в этот самый инпут. Для этого я использовал библиотеку "ui.autocomplete". Но что, то не работает , не могу понять причину. Кто уже работал с этой библиотекой подскажите, что не так.
Ниже представляю свой скрипт для илюстрации проблемы:
<input type="text" id="myinput">
$(function() {
var projects = [
{
value: "shrek",
label: "шрек, шрек",
desc: "мультфильм шрек 2",
icon: "shrek.jpg"
},
{
value: "рождественская история",
label: "мультфильм рождественская история",
desc: "мультфильм рождественская история",
icon: "cristmas.jpg"
},
{
value: "ледниковый период",
label: "мультфильм ледниковый период",
desc: "мультфильм ледниковый период",
icon: "lp.jpg"
}
,
{
value: "simpsoni",
label: "симпсоны",
desc: "описание, описание, описание...",
icon: "simpsoni.jpg"
}
];
});
$( "#myinput" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#myinput" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#myinput" ).val( ui.item.label );
$( "#myinput-id" ).val( ui.item.value );
$( "#myinput-description" ).html( ui.item.desc );
$( "#myinput-icon" ).fadeOut('slow',function(){
$(this).attr( "src", "images/" + ui.item.icon ).fadeIn('slow');
});
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
Вот версия с подключенной библиотекой :
jsfiddle.net/t52ka/35