有沒有人試圖在jqGrid中顯示jQuery UI自動完成的結果？

Question

我已經在不同情況下使用jquery UI自動完成。
我已經定製了結果，我已經成長爲喜歡它。
現在我想與jqGrid一起使用它。
基本上，我希望用戶在文本框中插入一些文本，而他/她正在這樣做時，jqgrid會加載數據。 我知道我可以創建自己的jquery插件並獲得相同的結果，但也許有人已經完成了我想要獲得的內容。

由於

Answer 1

爲什麼的jqGrid不結合在自動完成源的回調函數找到的數據對象。下面我有一個用於搜索用戶的文本框。它對稱爲SearchUsers的WCF服務進行ajax調用。在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); 
}; 

在匿名函數「功能（數據）」我是我現有的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' 
}); 

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

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

，我認爲這可以幫助周到，謝謝。