pdaniel on Add autocomplete to select dropdown box

Wed, 30 Nov 2011 19:17:11 +0200

I currently have the following grid which contains a select box for displaying project names (ProjectID column) for a .Net app. I would like to add the autocomplete function to this select box. I have seen other posts on here for this topic but have not been able to get it to work. I also don't want to oversimplyfy this as it's my first experience with jqgrid. Any suggestions on where to start would be appreciated. I saw examples that build out the combobox via embedded html inside the javascript code, but would like to try to avoid this if at all possible. I'd like to try to minimize the change I'll need below to accomplish this. Thanks in advance for your time!

        jQuery("#divGrid").jqGrid({
            colNames: ['Project', 'WorkType', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN', ''],
            colModel: [
        { name: 'ProjectID', index: 'ProjectID', width: 300, align: "left", editable: true, formatter: 'select', edittype: 'select',
            editoptions: { value: projectlist, dataEvents:
            [
                { type: 'change', fn: function (e) {
                    jQuery.data(document.body, "projID", $(this).val());
                }
                },
                { type: 'focus', fn: function (e) {
                    jQuery.data(document.body, "projID", $(this).val());
                }
                }
            ]
            }
        },
        { name: 'WorkType', index: 'WorkType', width: 140, align: "left", editable: true, formatter: 'select', edittype: 'select',
            editoptions: { value: worktypelist, dataEvents:
            [
                { type: 'change', fn: function (e) {
                    jQuery.data(document.body, "workType", $(this).val());
                }
                },
                { type: 'focus', fn: function (e) {
                    jQuery.data(document.body, "workType", $(this).val());
                }
                }
            ]
            }
        },
        { name: 'MON', index: 'MON', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'TUE', index: 'TUE', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'WED', index: 'WED', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'THU', index: 'THU', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'FRI', index: 'FRI', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'SAT', index: 'SAT', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'SUN', index: 'SUN', width: 50, align: "center", editable: true, editrules: { number: true }, editoptions: { size: "5″, maxlength: "5″} },
        { name: 'DELROW', index: 'DELROW', width: 40, align: "center", formatter: LinkFormatter }
        ],
            cellEdit: true,
            datatype: "local",
            data: WeekSheet,
            height: "auto",
            gridview: true,
            hoverrows: true,
            authwidth: true,
            viewrecords: true,
            forceFit: true,
            caption: '',
            rowNum: 10,
            editurl: 'url',
            cellsubmit: 'clientArray',
            hidegrid: false,
            onCellSelect: function (id, cellidx, cellvalue) {
                if (($("#divGrid tr[id='" + id + "'] td:eq(" + cellidx + ") input").val()) == 0)
                { $("#divGrid tr[id='" + id + "'] td:eq(" + cellidx + ") input").val(""); };
            },
            afterInsertRow: function (rowid, aData, rowElem) {
                $("#" + rowid + "").css("background", "yellow");
                $("#divGrid tr[id='" + rowID + "'] td:eq(0)").text("[Click to select project.]");
                $("#divGrid tr[id='" + rowID + "'] td:eq(1)").text("[Click to select work type.]");
            }
        });

    $(document).ready(function () {
        //get projects for select box
        $.ajax({
            type: "POST",
            async: false,
            url: "TimeSheet.aspx/GetProjectList",
            dataType: "json",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            success: function (data, textStatus, jqXHR) {
                projectlist = data.d;
            }
        });

jQuery Grid Plugin - jqGrid - Topic: Add autocomplete to select dropdown box

pdaniel on Add autocomplete to select dropdown box