Jquery, автозаполнение с использованием JSON, ID против отображения значений - PullRequest
Новая
       34

Jquery, автозаполнение с использованием JSON, ID против отображения значений

3 голосов
/ 06 февраля 2010

У меня сложная проблема с автозаполнением. Это для системы обмена сообщениями для веб-сайта, над которым я работаю. Я хочу, чтобы это работало там, где вы вводите имя пользователя, оно возвращается большим пальцем их изображения, его имени и идентификатора. Затем, когда вы выбираете его, я хочу, чтобы он отображал имя пользователя, но когда он отправляет ответ, я хочу, чтобы он отправил обратно их идентификатор (поскольку имя пользователя не уникально).

Я начал с http://blog.schuager.com/2008/09/jquery-autocomplete-json-apsnet-mvc.html в качестве подхода. Однако я использую tageditor.js из Stackoverflow в качестве моего расширителя, просто потому, что мне нравится, как он работает.

редактор тегов связан ниже. Я думаю, что это старая версия.

Мы используем MVC 1.0. Вот мой код: 

public ActionResult Recipients(string prefix, int limit)
        {
            IList<UserProfile> profiles = profileRepository.GetUsers(prefix, limit);

            var result = from p in profiles
                         select new
                         {
                             p.ProfileId,
                             p.FullName,
                             ImageUrl = GetImageUrl(p)
                         };

            return Json(result);
        }

Вот скрипт на странице 

<script type="text/javascript">
$(document).ready( function() {  
    $('#recipients').autocomplete('<%=Url.Action("Recipients", "Filter") %>', {      
        dataType: 'json',      
        parse: function(data) {
            var rows = new Array();          
            for(var i=0; i < data.length; i++) {
                rows[i] = { data: data[i], value: data[i].ProfileId, result: data[i].FullName };
            }          
            return rows;      
        },      
        formatItem: function(row, i, n) {
            return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.FullName + '</td></tr></table>';
        },      
        max: 20,
        highlightItem: true,
        multiple: true,
        multipleSeparator: ";",
        matchContains: true,
        scroll: true,
        scrollHeight: 300
     });
});
</script>

Итак, что происходит, если обратный вызов работает, мой список показывает изображение и имя пользователя, и когда я выбираю его, он помещает полное имя пользователя в текстовое поле с разделителем. Однако, когда я отправляю форму, отсылаются только имена, а не идентификаторы профиля. Любые идеи о том, как вернуть идентификаторы, не отображая их в текстовом поле?

EDIT: Вот версия tageditor.js, которую я использую http://www.gotroleplay.com/scripts/tageditor.js

Ответы [ 3 ]

2 голосов
/ 06 февраля 2010

Я знаю, что это неубедительно, но я всегда либо (а) публикую данные из обработчика результатов (НЕ из formatResult, который, насколько я понимаю, просто форматирует результат для помещения в текстовое поле, либо (б) вставляет значение в скрытом поле - снова из обработчика результатов - для публикации. 

    $('#recipients').autocomplete({options})
     .result(function(event, data, formatted) {
         $("#hidden_field").val( data.ProfileId );
// or just post the data from in here...
    });

или что-то. Пожалуйста, дайте нам знать, если вы найдете лучший способ ...

Очевидно, что публикация непосредственно из автозаполнения «результат» подходит только в очень специфических сценариях

1 голос
/ 06 февраля 2010

Я думаю, вам нужен формат Result. Это то, что я использую для того, что отправляется обратно на сервер. Я думаю, что это будет выглядеть примерно так: 

formatResult(row, i, n) {
    return row.value;
}

если "value: data [i] .ProfileId" - это то, что вы хотите отправить.

0 голосов
/ 16 ноября 2011

Этот ответ приходит почти на год позже, но я проверил его, и прекрасно работает .

Попробовав множество способов и посетив этот вопрос в SO, я наконец-то нашел лучшее решение для отображения значений, но для отправки идентификаторов.

Пошаговые инструкции

1 - Получить «последнюю» версию плагина jQuery для автозаполнения Jörn из репозитория GitHub (официальная версия была объединена с пользовательским интерфейсом jQuery, но некоторые разработчики все еще поддерживают и обновляют «автономную») здесь : Плагин jQuery для автозаполнения (GitHub)

2- Используйте такой массив JS (вы также можете использовать AJAX): 

var categories = [
 { name: "Lawyer", id: "1" },
 { name: "Driver", id: "2" },
 { name: "Dentist", id: "3" },
];

3- Используйте эту функцию JavaScript для запуска плагина: 

$("#category").autocomplete(categories, {
    formatItem: function(row, i, max) { return row.name; },
    formatMatch: function(row, i, max) { return row.name; },
    formatResult: function(row) { return row.name; }
});
$("#category").result(function(event, data, formatted) {
    $("#category_id").val(data["id"]);
});

4- Добавьте еще одно скрытое поле в форму, например: 

<input type="text" id="category" />
<input type="hidden" id="category_id" name="category_id" value="" />

PS: Вы можете использовать виджет автозаполнения пользовательского интерфейса jQuery, поскольку он основан на виджете Йорна, но пока не тестировал его.

...