有没有人试图在jqGrid中显示jQuery UI自动完成的结果？

问题描述

| 我已经在不同情况下使用了jQuery UI自动完成功能。 我已经定制了结果，并且已经变得喜欢它。 现在，我想将其与jqgrid结合使用。 基本上，我希望用户在文本框中插入一些文本，并且在他/她这样做的同时，jqgrid会加载数据。 我知道我可以创建自己的jquery插件并达到相同的结果，但是也许有人已经做了我想要得到的。 谢谢     

解决方法

        为什么不将jqGrid绑定到自动完成源的回调函数中找到的数据对象。在下面，我有一个文本框供某人搜索用户。它对称为SearchUsers的WCF管道进行ajax调用。在ajax调用成功时，将调用“ function（data）.... \”，其中“ data”是返回的数据。

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

在匿名函数“函数（数据）”中，我将现有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,{ name: \'UserName\',index: \'UserName\',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\'
});

    ,        

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

我认为这可以为您提供帮助。     ,        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,colNames: [\'Code\',\'Description\'],colModel: [
        { name: \'Code\',index: \'Code\',sortable: true,width: 50,align: \'left\' },{ name: \'Description\',index: \'Description\',width: 250,align: \'left\' }
        ],width: 300,height: 170
    });
}