的jqGrid - 。內聯編輯與自動完成

Question

我相信，我看見它已經在一個例子，但無法再次找到它:(

我有一個jqGrid的內聯編輯這工作正常 一列有一個選擇框有200個條目，那些已經從數據庫查詢中檢索出來

由於200個條目太多，我想要有一個輸入字段和一個實時搜索，一旦點擊它，這個ID就應該被保存起來

有沒有人知道一個例子？

非常感謝， 安東尼亞

Answer 1

你可以使用jQuery-ui自動完成，因爲你已經有了jquery ui庫。 添加combobox.js，它將根據選擇框的值設置自動完成，只需對其添加一個「組合框」類即可。

// jquery and jquery UI already loaded... 
<script src="combobox.js"></script> 
<select class="combobox"> 
    <option value="foo">foo</option> 
    <option value="bar">bar</option> 
    <option value="baz">baz</option> 
</select> 

活生生的例子：http://jsfiddle.net/CJTd2/1/

Answer 2

嘗試這樣的：

function element(value,options){ 
    return $('<input type="hidden" value="'+value+'" />'); 
} 
function elementval(elem){ 
    return elem.val(); 
} 
function fieldfunctions(id){ 
    $("#"+id+"_name").autocomplete({ 
     source: "list.php", 
     minLength: 2, 
     select: function(event, ui) { 
      $("#"+id+"_id_name").val(ui.item.id); 
     } 
    }); 
} 

$("#table").jqGrid({ 
    url: 'data.php', 
    datatype: "json", 
    mtype: 'POST', 
    height: 400, 
    colNames: ['Name','Id name'], 
    colModel: [ 
     {name: 'id_name',width: 30,hidden:true,editable:true,edittype:'custom',editoptions:{custom_element:element,custom_value:elementval}}, 
     {name: 'name',index: 'name',editable:true,edittype:'text',width: 100} 

    ], 
    onSelectRow: function(id){ 
     $("#table").jqGrid('editRow',id, true,fieldfunctions); 
     } 
    });