Question

I’m using jqGrid in a project, and have managed to replace some of the controls on the edit/input modal with a jQuery autocomplete control, but would prefer something like a combobox.

How would it be possible to replicate the functionality, as I’m struggling to get any of the jQuery combobox add-ons working.

My data set is in json format, so it would be cool if I can keep it that way.

Answer 1

This is what I did to turn my autocompletes into comboboxes.

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