Как отобразить выпадающий с возможностью добавить элемент в JQgrid

Question

У меня есть JQGrid, и я показываю раскрывающийся список в столбце, когда строка открыта для встроенного редактирования. Этот раскрывающийся список показывает уже доступные элементы списка из базы данных. Когда я сохраняю сетку из clientArray, обновленные данные сохраняются в базе данных.

Теперь мне нужна опция, чтобы добавить новый элемент в этот выпадающий список и добавить этот элемент в базу данных, чтобы, когда пользователь в следующий раз заглянет в выпадающий список, новый элемент был доступен.

Может ли кто-нибудь помочь в выяснении, есть ли возможность сделать раскрывающийся список с текстовым полем ввода, чтобы новый элемент мог быть добавлен в раскрывающийся список во время выполнения.

Ниже приведен пример кода, который я использую для отображения раскрывающегося списка.

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

Если вы хотите, чтобы пользователи могли вводить данные в выборку, то вам нужен комбинированный список или ввод со списком данных:

https://jsfiddle.net/kzm7jq74/

Ваш выбранный код генерации будет переписан примерно так:

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>';

Если это не сработает, я бы порекомендовал поиск в Google для поиска в плагине комбинированного списка jquery, или посмотрите, может ли автозаполнение jquery работать на вас:

https://jqueryui.com/autocomplete/

ОБНОВИТЬ

Посмотрите эту скрипку о том, как добавить список данных в таблицу: https://jsfiddle.net/y3llowjack3t/a385ayau/1/