So zeigen Sie Dropdown mit Option zum Hinzufügen von Element in JQgrid an

Question

Ich habe ein JQGrid und ich zeige ein Dropdown in einer Spalte an, wenn die Zeile für die Inline-Bearbeitung geöffnet wird. Dieses Dropdown-Menü zeigt bereits verfügbare Listenelemente aus der Datenbank an. Wenn ich das Raster vom clientArray speichere, werden die aktualisierten Daten in der Datenbank gespeichert.

Jetzt brauche ich eine Option, um ein neues Element in diesem Dropdown hinzuzufügen und dieses Element in der Datenbank hinzuzufügen, damit das neue Element verfügbar ist, wenn das nächste Mal Benutzer in das Dropdownfeld schaut.

Könnte jemand bitte helfen herauszufinden, wenn es eine Option gibt, um das Dropdown mit Eingabetextbox zu machen, so dass ein neues Element in der Dropdown-Liste zur Laufzeit hinzugefügt werden kann.

Unten ist der Beispielcode, den ich verwende, um das Dropdown anzuzeigen.

mygrid = jQuery("#list").jqGrid({ 
    url:url, 
datatype: "json", 
height: 'auto', 
width: winW,   
colNames:['id','cusipNo','Account No.','Account Type','Location Memo','Account Coding'], 
colModel:[ 
    {name:'Id',index:'stockRecordId',hidden:true,key: true,search: false}, 
    {name:'cusipNo',index:'cusipNo',hidden:true}, 
    {name:'accountNo',index:'accountNo',sortable:true,search: false, align: 'left',editable: true, width: 90, editrules:{custom: true, custom_func: validateAccountNo }}, 
    {name:'accountType',index:'accountType',sortable:true,search: false, align: 'center',editable: true, width: 100}, 
    {name:'locationMemo',index:'locationMemo',sortable:true,search: false, align: 'center',editable: true, width: 110}, 
    {name:'accountCoding',index:'accountCoding',sortable:true,search: false, align: 'left',editable: true, width: 370, edittype: 'select', 
     editoptions: { dataUrl: accCodingUrl , 
       buildSelect: function (data) { 
        var sel = '<select>'; 
        $.each(JSON.parse(data),function(i,accountCoding){ 
        sel += '<option value="'+accountCoding.key+'">'+accountCoding.value+'</option>'; 
         }); 
        return sel + "</select>"; 
       } 
      } 
}], 
cmTemplate: {editable: true}, 
multiselect: false,  
paging: true, 
loadonce:true, 
sortname: 'Id', 
rowList: [], 
rowNum:-1, 
pager: $("#page"),  
viewrecords: false, 
pgbuttons: false, 
pgtext: null, 

Answer 1

Wenn Sie Benutzer in der Lage sein, die Auswahl einzugeben Daten in dann, was Sie wollen, ist ein Combobox oder ein Eingang mit einem Datenliste:

https://jsfiddle.net/kzm7jq74/

Ihr ausgewählter Generierungscode wird umgeschrieben um so etwas wie:

var sel = '<input type="text" list="accntCodes"/><datalist id="accntCodes">'; 
      $.each(JSON.parse(data),function(i,accountCoding){ 
      sel += '<option data-value="'+accountCoding.value+'" value="'+accountCoding.key+'">'; 
       }); 
      return sel + '</datalist>'; 

Wenn dies nicht funktioniert für Sie, dann würde ich eine Google-Suche nach einer jquery Combobox Plugin vorschlagen, oder ob jquery die automatische Vervollständigung für Sie arbeiten kann:

https://jqueryui.com/autocomplete/

UPDATE

sehen Sie diese Geige, wie die Datenliste in das Netz hinzuzufügen: https://jsfiddle.net/y3llowjack3t/a385ayau/1/