Question

I am sure that I saw it already in an example but can t find it again :(

I have a jqGrid with inline editing. That works fine. One column has a select box with 200 entries. Those get retrieved from a database query already.

Since 200 entries are too much, I want to have an input field and a live search. Once clicked on it, the ID should be saved.

Does anyone know an example?

Many thanks, Antonia

Answer 1

You can use jQuery-ui autocomplete, since you already have the jquery ui library included. Add combobox.js which will set up the autocompletion based on the values of the select box, simply a class "combobox" to it.

// 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>

Live example: http://jsfiddle.net/CJTd2/1/

Answer 2

try with this:

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

友情链接