Has anyone tried to display the result of jquery UI autocomplete in a jqGrid?

Question

I've used jquery UI autocomplete in different situations.
I've customized the results and I've grown to love it.
Now I would like to use it in conjunction with jqGrid.
Basically, I would like the user to insert some text in a textbox, and while he/she is doing that the jqgrid loads the data. I know I could create my own jquery plug-in and achieve the same result but, maybe, someone has already done what I am trying to get.

Thanks

Answer 1

colModel: [

                {
                    name: 'PNumber', width: 30, index: 'PNumber',align:'center',
                    editable: true, editrules: { required: true },editoptions:{dataInit:pnumberAuto},
                    searchoptions: {dataInit:pnumberAuto, sopt: ['eq', 'cn'] }
                },

            ],

The pnumberAuto is:

function pnumberAuto(e) {
    $(e).autocomplete({
        source: '/Autocomplete/QuickSearchPN',
        delay:0
    })
}

The controller is:

 public ActionResult QuickSearchPN(string term)
        {
            var q = (from p in db.BOM
                     where p.PNumber.Contains(term)
                     select p.PNumber).Distinct().Take(10);
            return Json(q, JsonRequestBehavior.AllowGet);
        }

I think this can help you.Thanks.

Answer 2

pedrodg put me on the right way.
If someone is interested:

var myGrid = jQuery("#MyGrid");

LoadSearchGrid([{}]);

$("#MySearch").autocomplete({
    minLength: 3,
    delay: 300,
    source: function(request, response) {
        $.ajax({
            url: '<%=Url.Action("FetchData", "Home")%>',
            data: { Search: request.term },
            dataType: "json",
            type: "POST",
            success: function(data) {
                myGrid.jqGrid('clearGridData');
                myGrid.setGridParam({ data: data });
                myGrid.trigger("reloadGrid");
            }
        });
    }
});

function LoadSearchGrid(gridData) {
    myGrid.jqGrid({
        data: gridData,
        datatype: "local",
        colNames: ['Code', 'Description'],
        colModel: [
        { name: 'Code', index: 'Code', sortable: true, width: 50, align: 'left' },
        { name: 'Description', index: 'Description', sortable: true, width: 250, align: 'left' }
        ],
        width: 300,
        height: 170
    });
}

Answer 3

Why not bind the jqGrid to the data object found in the callback function of the autocomplete source. Below I have a text box for somebody to search for users. It makes an ajax call to a WCF wervice called SearchUsers. On the ajax call's success "function(data)...." is called, with "data" being the data returned.

//create the userlistautocomplete
$("#txtSearchUsers").autocomplete({
    source: function (request, response) {
        SecurityAjax.SearchUsers(request.term, function (data) {
            $("#usersList").jqGrid('clearGridData');
            gridData = data;
            $("#usersList").setGridParam({ data: gridData });
            $("#usersList").trigger("reloadGrid");
        });
    },
    minLength: 2,
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.FirstName + "<br>" + item.LastName + "</a>").appendTo(ul);
};

In the anonymous function "function (data)" I am setting my existing jqGrid's data to the autocomplete data and then refreshing the grid, where my grid is defined as follows:

    $("#usersList").jqGrid({
    data: gridData,
    width: 800,
    datatype: "local",
    colNames: ['User Id', "First Name", "Last name", "User name"],
    colModel: [
    { name: 'SysUserId', index: 'SysUserId', width: 55, hidden: true },
    { name: 'FirstName', index: 'FirstName', width: 100, editable: true },
    { name: 'LastName', index: 'LastName', width: 90, editable: true },
    { name: 'UserName', index: 'UserName', width: 90, editable: true }
    ],
    caption: "Using events example",
    onSelectRow: function (id) {
    if (id && id !== lastsel) {

    lastsel = id;
    }
    },

    ondblClickRow: function (id) {

    },
    localReader: {
    repeatitems: false,
    id: "UserId"
    },
    pager: '#pusersList'
});