Активировать автозаполнение с помощью функции комбинированного списка / эмуляции

Question

Я использую jqGrid в проекте, и мне удалось заменить некоторые элементы управления на модале редактирования / ввода на элемент управления автозаполнением jQuery, но я бы предпочел что-то вроде комбинированного списка.

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

Мой набор данных имеет формат json, поэтому было бы здорово, если бы я мог сохранить его таким образом.

Answer 1

Я думаю, что плагин jQuery, который вы ищете, это Flexselect , который реализует алгоритм ранжирования поиска Жидкий металл для создания желаемого эффекта.

Answer 2

Это то, что я сделал, чтобы превратить мои автозаполнения в комбинированные списки.

initImpactEdit = function (elem) {
            setTimeout(function () {
                $(elem).autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '@Url.Action("ImpactOptions")',
                            dataType: "json",
                            data: {
                                filter: request.term
                            },
                            success: function (data) {
                                response($.map(eval(data), function (item) {
                                    return {
                                        label: item.Impact_name,
                                        value: item.Impact_name,
                                        DTI_ID: item.DTI_ID
                                    }
                                })
                            );
                            }
                        })
                    }
                    }
                });

            $(elem).addClass('customAutoCompleteWidth');

            $('<button class="customDropdown"> </button>')
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(elem)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
                var widg = $(elem);

                if (widg.autocomplete("widget").is(":visible")) {
                    widg.autocomplete("close");
                    return;
                }

                if (widg.val().length == 0) {
                    // pass empty string as value to search for, displaying all results
                    widg.autocomplete("search", "*");
                } else { widg.autocomplete("search", widg.val()); }
                widg.focus();
            });

            }, 100);
        };

{ name: 'Impact', index: 'Impact', editoptions: { dataInit: initImpactEdit  } },