Пользовательский интерфейс jQuery Autocomplete Custom Object в качестве источника, а не String Array - PullRequest
Новая
       13

Пользовательский интерфейс jQuery Autocomplete Custom Object в качестве источника, а не String Array

5 голосов
/ 10 августа 2011

Я использую автозаполнение JQueryUI и мне интересно, как использовать пользовательский объект в качестве источника данных (то есть я хочу передать список следующего типа): 

public class Tag
{
    public string Name { get; set; }
    public int Count { get; set; }
}

Код автозаполнения, который я сейчас использую (и он прекрасно работает, когда я возвращаю массив имен строк), в значительной степени является копией сайта jQuery UI: 

$(function () {
        function split(val) {
            return val.split(/ \s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $("#tags")
        // don't navigate away from the field on tab when selecting an item
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function (request, response) {
                $.getJSON("Home/GetTag", {
                    term: extractLast(request.term)
                }, response);
            },
            search: function () {
                // custom minLength
                var term = extractLast(this.value);
                if (term.length < 1) {
                    return false;
                }
            },
            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(" ");
                return false;
            }
        });
    });

Единственное, что я изменил по сравнению с исходным демо-источником, - это URL, и я разделяю его на пробел, а не на запятую (для множественного автозаполнения).

Вот HTML: 

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags"/>
</div>

В идеале я хочу представить пользователю список имен с соответствующим количеством рядом.

1 Ответ

8 голосов
/ 11 августа 2011

как использовать пользовательский объект в качестве источника данных

Вам необходимо отформатировать данные так, как ожидает виджет.У вас должно быть либо свойство label, либо свойство value (или оба) в каждом объекте в массиве результатов, чтобы виджет отображал ваши результаты.Вы можете включать другие данные в объект, если он удовлетворяет этим требованиям.

Для форматирования данных, возвращаемых с сервера, соглашение должно использовать $.map: 

source: function (request, response) {
    $.getJSON("Home/GetTag", {
        term: extractLast(request.term)
    }, function (data) {
        response($.map(data, function (item) {
            return {
                value: item.Name,
                count : item.Count
            };
        });
    });
},

(не проверено)

Это должно привести к заполнению результатов для вас.Это идет рука об руку со второй частью вашего вопроса:

В идеале я хочу представить пользователю список имен с соответствующим количеством рядом.

Это довольно легко выполнить, следуя этой демонстрации в качестве руководства: 

$("#auto").autocomplete({ ... })
    .data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br />" + item.count + "</a>")
            .appendTo(ul);
    };

Вы можете переопределить функцию _renderItem, чтобы отобразить все, что вы хотите, если это li, который содержит a тег и содержит данные item.autocomplete.

Объедините эти две стратегии, и вы должны быть в бизнесе.Для рабочего примера этого посмотрите пример здесь : http://jsfiddle.net/andrewwhitaker/UvegL/

Этот пример объединяет удаленный источник данных и пользовательские данные и отображение.Надеюсь, это поможет, хотя вызов AJAX немного отличается.

...