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

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'
});