Question

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

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

我的数据集是json格式，所以如果我能保持这种状态会很酷。

Answer 1

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

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  } },

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

2 个答案: