Как я могу включить изображения в этот скрипт автозаполнения jquery? - PullRequest
Новая
       31

Как я могу включить изображения в этот скрипт автозаполнения jquery?

2 голосов
/ 20 января 2012 
$("#shout_field").live('keydown', function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length >= 2) {
                    $.ajax({
                        type: "POST",
                        url: "/data/people.asp",
                        dataType: "json",
                        data: {
                            term: term
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (c) {
                                return {
                                    id: c.id,
                                    label: '<b>' + c.img + '</b>' + c.label,
                                    value: c.value
                                }
                            }));
                        }
                    });
                } else {
                    results = ['Type someones name to tag them in the status...'];
                }
            }
            response(results);
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);

            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");

            $('body').data('tagged', this.value)

            var tagged_users = $("#tagged_users").val();
            $("#tagged_users").val(tagged_users + ui.item.id + ',')

            return false;
        }
    });

Я могу сделать это нормально, но при автозаполнении, поступающем от удаленного вызова, я запутался ...: (

Интересующая меня часть - это та часть, где c.img находится в тегах <b>, она не отображается как HTML ...

1 Ответ

1 голос
/ 20 января 2012

Вы должны переопределить приватный метод _renderItem() плагина.
Эта функция вызывается для каждого отображаемого элемента.

Первый аргумент представляет элемент <ul>, который плагин создает для отображения меню. Второй аргумент - текущий элемент данных.

По умолчанию плагин генерирует <ul>, поэтому в вашем переопределении _renderItem() вы должны продолжать делать <li>, но вы можете иметь в нем что угодно.

В вашем случае я бы вернул совершенно другой объект данных массива, он просто хранит данные, поэтому лучше разделить все: 

return {
    id: c.id,
    label: c.label,
    imgUrl: c.img,
    value: c.value
}

Чтобы реализовать собственный метод рендеринга, вы просто заново определяете новую функцию для экземпляра плагина. Как это работает?

  • Когда вы звоните $('#myelement').autocomplete(), плагин создает и

    1. Создает необходимую разметку и т. Д.
    2. Добавляет экземпляр плагина к элементу #myelement в виде данных jquery под именем «автозаполнение»

  • Экземпляр плагина затем можно получить, выполнив $('#myelement').data('autocomplete');

  • Затем вы можете определить новую функцию для метода _renderItem

Это дает: 

$("#shout_field").autocomplete({
    ...
})
.data('autocomplete')  // get the instance of the plugin
._renderItem = function( ul, item ) {  // change the _renderItem method

    // "item" is the current data item, so { id, label, imgUrl, value }


    return $( "<li></li>" ) // generate a <li> element

            // store the data item (used by the plugin)
            .data( "item.autocomplete", item )

            // create the display you want into the <li>
            .append( '<img src="' + item.imgUrl + '" />' + '<a>' + item.label + '<br>' + item.desc + '</a>' )

            // add the <li> to the list
            .appendTo( ul );

};
...