Как вы можете создать новое значение, используя выпадающий список JQuery UI

Question

Я только что добавил на страницу комбинированный список jQuery UI.Кажется, он ограничивает выбор только теми, которые были переданы (или присутствуют в списке выбора).Я хотел сделать так, чтобы, если пользователь вводит значение, которого нет в списке выбора, он отправляет данные на сервер (в сообщении) и создает его.Я не вижу никаких вариантов, чтобы отключить «проверку».Как мне добавить эту функцию?

- EDIT--

Я добавил код, чтобы автозаполнение работало с добавленной кнопкой.Однако это не работает при вызове метода Ajax.Метод Ajax правильно возвращает json (список цветов), но когда я начинаю вводить 'Re' в надежде, что он отфильтрует элементы, содержащие красный, это не так.

Вот мой код:

var $colInput = $("#Colour").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/admin/stockitems/colours",
                dataType: "json",
                data: { id: null },
                success: function (data) {
                    var arr = [];
                    $.each(data, function (i, val) {
                        arr.push(val.Title);
                    });
                    response(arr);
                }
            });
        },
        minLength: 0
    }).addClass("ui-widget ui-widget-content ui-corner-left");

    $("<button type='button'>&nbsp;</button>")
        .attr("tabIndex", -1)
        .attr("title", "Show All Items")
        .insertAfter($colInput)
        .button({
            icons: {
                primary: "ui-icon-triangle-1-s"
            },
            text: false
        })
        .removeClass("ui-corner-all")
        .addClass("ui-corner-right ui-button-icon")
        .click(function () {
            // close if already visible                         
            if ($colInput.autocomplete("widget").is(":visible")) {
                $colInput.autocomplete("close");
                return;
            }
            $(this).blur();
            $colInput.autocomplete("search", "");
            $colInput.focus();
        });

Answer 1

Демонстрация combobox использует базовый элемент select в качестве резервного хранилища для виджета автозаполнения.Я бы не рекомендовал это для формы, в которой вы позволяете пользователю вводить все, что он хочет.

Однако вы можете эмулировать эффект комбинированного списка самостоятельно без особых проблем:

var $input = $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

$("<button type='button'>&nbsp;</button>")                     
    .attr("tabIndex", -1)                     
    .attr("title", "Show All Items")                     
    .insertAfter($input)                     
    .button({                         
        icons: {                             
            primary: "ui-icon-triangle-1-s"                         
        },                         
        text: false                     
    })                     
    .removeClass("ui-corner-all")                     
    .addClass("ui-corner-right ui-button-icon")                   
    .click(function() {                         
        // close if already visible                         
        if ($input.autocomplete("widget").is(":visible")) {
             $input.autocomplete( "close" );
             return;                         
        }                                              
        $(this).blur();                                                 
        $input.autocomplete("search", "" );                         
        $input.focus();                     
    });

В основномэто поведение по умолчанию для виджета автозаполнения, плюс кнопка, которая будет опускать все опции.

Таким образом, поле поддержки является элементом input, и вы можете принимать ввод пользователя в формеи добавьте его к источнику в следующий раз.

Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/CDYBk/1/

Answer 2

Вы также можете просто захватить входное значение с помощью чего-то вроде $ (...). ParentNode.children [1] .children [0] .value, если вы не хотите возиться с виджетами. Тогда вы всегда можете добавить опцию выбора, если хотите.