Проблема с делимитиром с использованием jquery и mvc razor

Question

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

У меня есть текстовое поле с привязкой к jQuery:

<div class="editor-field">
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name)
</div>
<script type="text/javascript">
$(document).ready(function () {
    $("#Name").autocomplete('@Url.Action("TagName", "Tag")', {
        minChars: 1,
        delimiter: /(,|;)\s*/,
        onSelect: function(value, data){
            alert('You selected: ' + value + ', ' + data);
        }
    });
});
</script>

Используются данные с моего контроллера:

public ActionResult TagName(string q)
{
    var tags = new List<TagModel>
    {
        new TagModel {Name = "aaaa", NumberOfUse = "0"},
        new TagModel {Name = "mkoh", NumberOfUse = "1"},
        new TagModel {Name = "asdf", NumberOfUse = "2"},
        new TagModel {Name = "zxcv", NumberOfUse = "3"},
        new TagModel {Name = "qwer", NumberOfUse = "4"},
        new TagModel {Name = "tyui", NumberOfUse = "5"},
        new TagModel {Name = "asdf[", NumberOfUse = "6"},
        new TagModel {Name = "mnbv", NumberOfUse = "7"}
    };

    var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3);

    string content = string.Join<string>("\n", tagNames);
    return Content(content);
}

Я использую следующие сценарии:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />

В Firebug нет ошибок. Что не так с моим кодом?

Answer 1

Испытывал такого рода проблемы с firebug.

Предлагаю не доверять консоли Firebug пока он не содержит сообщения об ошибках

Если ваш код не работает должным образом, и Firebug не показывает никаких сообщений об ошибках, тогда пришло время проверить вашу веб-страницу в Chrome и посмотреть, где именно исключение не обрабатывается на вкладке Консоль, особенно когда Вы используете AJAX .

Answer 2

1. Создайте div (контейнер).

2. Создайте его так, чтобы он выглядел как текстовая область.

3. Поместите свое текстовое поле в div.Float это осталось.Очистите границы. (Таким образом, с курсором в текстовом поле div действительно будет выглядеть как текстовая область.)

4. Привязать автозаполнение к этому полю.

5. При выборе создайте span или div или что-то вроде этого `TheLabel и добавьте его в div (контейнер).

   1. Перед тем как добавить его, сохраните объект вspan с использованием jquery .data()

   2. Это создаст хороший пользовательский интерфейс.

6. Если вы захотите, вы также можете дать возможность удалить предыдущий выбор.

Answer 3

Какую версию автозаполнения вы используете, jquery ui one не поддерживает это. Подробнее см. http://jqueryui.com/demos/autocomplete/#multiple.

Это фрагмент страницы для настройки нескольких вариантов выбора

.autocomplete({
        minLength: 0,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
        },
        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;
        }
    });

Answer 4

Функция автозаполнения, включенная в пользовательский интерфейс jQuery, имеет другой формат кода, чем автономный плагин jQuery. Подробную информацию об этом можно найти на веб-сайте jQuery UI по ссылке ниже.

http://jqueryui.com/demos/autocomplete/

Вот простой пример функции автозаполнения пользовательского интерфейса jQuery

$( "#Name" ).autocomplete({
        source: url,
        minLength: 1,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

Answer 5

Я бы порекомендовал вам использовать более свежий плагин jQuery UI autocomplete . JQuery ui 1.8 даже распространяется как часть новых проектов ASP.NET MVC 3.

Что касается вашего кода, попробуйте исправить это так:

var url = '@Url.Action("TagName", "Tag")';
$('#Name').autocomplete(url, {
    minChars: 1,
    multiple: true,
    formatResult: function(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
}).result(function (event, data, formatted) {
    alert(!data ? "No match!" : "Selected: " + formatted);
});