Кто-нибудь пытался отобразить результат автозаполнения пользовательского интерфейса jquery в jqGrid?

Question

Я использовал автозаполнение пользовательского интерфейса jquery в различных ситуациях.
Я настроил результаты и полюбил его.
Теперь я хотел бы использовать его вместе с jqGrid.
По сути, я хотел бы, чтобы пользователь вставил некоторый текст в текстовое поле, и пока он / она делает это, jqgrid загружает данные.Я знаю, что мог бы создать свой собственный плагин jquery и добиться того же результата, но, возможно, кто-то уже сделал то, что я пытаюсь получить.

Спасибо

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

            ],

pnumberAuto:

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

Контроллер:

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

Я думаю, что это может помочь вам. Спасибо.

Answer 2

pedrodg поставь меня на правильный путь.
Если кому-то интересно:

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

Почему бы не привязать jqGrid к объекту данных, найденному в функции обратного вызова источника автозаполнения. Ниже у меня есть текстовое поле для поиска пользователей. Это делает ajax-вызов wervice WCF под названием SearchUsers. После успешного вызова ajax вызывается «функция (данные) ....», а «данные» - это возвращаемые данные.

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

В анонимной функции "function (data)" я устанавливаю данные моего существующего jqGrid на автозаполнение данных, а затем обновляю сетку, где моя сетка определяется следующим образом:

    $("#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'
});