使用按钮/模拟组合框功能触发自动完成答案

【问题标题】：Trigger autocomplete using button/emulate combobox functionality使用按钮/模拟组合框功能触发自动完成
【发布时间】：2012-01-15 15:23:37
【问题描述】：

我在一个项目中使用 jqGrid，并设法用 jQuery 自动完成控件替换了编辑/输入模式上的一些控件，但我更喜欢组合框之类的东西。

如何才能复制该功能，因为我正在努力让任何 jQuery 组合框插件正常工作。

我的数据集是json 格式，所以如果我能保持这种格式就好了。

【问题讨论】：

标签： javascript jquery jquery-ui jqgrid

【解决方案1】：

我认为您正在寻找的 jQuery 插件是 Flexselect，它实现了 Liquid metal 搜索排名算法以创建所需的效果。

【讨论】：

【解决方案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  } },

【讨论】：