JQuery UI autocomplete - изображения в результатах наложения, а не снаружи, как в демонстрации - PullRequest
Новая
       74

JQuery UI autocomplete - изображения в результатах наложения, а не снаружи, как в демонстрации

5 голосов
/ 25 октября 2011

У меня есть код jQueryUI для автозаполнения, который следует .... 

$(function() {
      var updates = [ 

       { value: "URL",
         label: "some text",
         icon: "jqueryui_32x32.png"};
       ];

        $("input#autocomplete").autocomplete({
              delay: 10,
              minLength: 0,                                          
        source: updates,        
        select: function( event, ui ) {
              window.location.href = ui.item.value;
        }
    });
});

И, по сути, он производит поиск по сайту, где результаты являются прямыми ссылками. Я хотел бы добавить изображения, которые хранятся локально к результатам, чтобы больше подражать Facebook. Мне не повезло, и я видел вопросы, прежде чем направлять пользователей на демонстрацию «Пользовательские данные». Вот один такой вопрос ...

Как добавить изображения к результатам этого плагина автозаполнения JQueryUI?

Я в курсе или это демо ...

http://jqueryui.com/demos/autocomplete/#custom-data

.. но нет НИКАКИХ указаний относительно того, как можно поступить, сделав это ПОДРОБНО о форматировании наложения результатов / размещении изображений в наложении. Я действительно в растерянности здесь. Я весь день разбирал это демо, и мне нечего было показать. Это должно быть легко, потому что все данные и изображения являются локальными. Они все находятся в одной папке с этим поиском. Здесь нет ни PHP, ни базы данных, чтобы иметь дело ...

Я действительно, очень ненавижу пользовательский интерфейс jQuery из-за того, насколько он плохо документирован и насколько он излишне сложен ... Все настройки выполняются в нескольких файлах и т. Д .... Я использовал плагин JÖRN ZAEFFERER, который принимаются простые теги HTML. Он работал очень хорошо, пока IE8 ......

Любое понимание этого очень, очень ценится.

1 Ответ

17 голосов
/ 26 октября 2011

Рекомендуемый способ изменить отображение элементов списка в списке предложений для автозаполнения - переопределить метод _renderItem. Внутри этого метода вы должны сделать несколько вещей:

  1. Добавить li к переданному в ul. li должен содержать тег a.
  2. Свяжите правильные данные с этим li
  3. Верните это li.

Помимо этого, вы можете выполнять любую произвольную логику форматирования, какую пожелаете. Вот как я бы обновил ваш код: 

$("input#autocomplete").autocomplete({
    delay: 10,
    minLength: 0,                                          
    source: updates,        
    select: function( event, ui ) {
        window.location.href = ui.item.value;
    }
}).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + item.icon + "' />" + item.label + "</a>")
            .appendTo(ul);
};

Как видите, добавить тег img было так же просто, как разместить его внутри тега a, упомянутого выше. Помните, что вы также можете применять правила CSS к элементам, которые вы добавляете.

Вот полный пример , который использует API StackOverflow для поиска пользователей и показывает их аватары слева от них.

<ч />

Обновление : Начиная с jQueryUI 1.10, вам необходимо получить доступ к данным виджета для автозаполнения, используя .data("uiAutocomplete") (спасибо, что заметили проблему @ Danny ). Имея это в виду, вот пример, работающий в 1.10: 

$("input#autocomplete").autocomplete({
    delay: 10,
    minLength: 0,                                          
    source: updates,        
    select: function( event, ui ) {
        window.location.href = ui.item.value;
    }
}).data("uiAutocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + item.icon + "' />" + item.label + "</a>")
            .appendTo(ul);
};

Пример: http://jsfiddle.net/K5q5U/249/

...