@Valeriy1997

Почему не работает вставка результатов поиска в инпут?

Нужно , чтоб при наборе символов в инпут , выбивало результаты поиска по 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
  • Вопрос задан
  • 235 просмотров
Решения вопроса 1
@eldar_web
Вместо того содержимого плагина - поставь это содержимое: code.jquery.com/ui/1.11.4/jquery-ui.js
То есть, еще тот код инициализации ты должен пометить внутри jquery-функции. Короче, вот: jsfiddle.net/t52ka/36
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы