Combobox autocomplete whilst limiting options to those listed

[andyj]

Is it possible to implement the autocomplete functionality for a combobox AND limit the valid options to only those that are in the list.

It seems that for autocomplete to work both mode:remote and editable:true must apply.
However, editable:true means the user can enter any value and is not constrained to the list options.

<input id="idAccountsReceivableTaxType" name="AccountsReceivableTaxType" class="easyui-combobox" style="width:200px"
data-options="valueField:'xerogstcode',
textField:'vat_description',
url:'get_vatcode_data.php',
mode:'remote',
editable:true" />

Is there some way of blocking the user to leave the field unless nothing or one of the dropdown list options has been selected?

[jarry]

A possible solution to solve this issue is to add a validate type to this combobox. When inputed value is invalid, the prompt message will display.

Code:

$.extend($.fn.validatebox.defaults.rules,{
       inList:{
              validator:function(value,param){
                     var c = $(param[0]);
                     var opts = c.combobox('options');
                     var data = c.combobox('getData');
                     var exists = false;
                     for(var i=0; i<data.length; i++){
                            if (value == data[i][opts.textField]){
                                   exists = true;
                                   break;
                            }
                     }
                     return exists;
              },
              message:'invalid value.'
       }
})

Apply this 'inList' validation type to a combobox component.

Code:

$('#cc').combobox({
       validType:'inList["#cc"]'
});

[andyj]

Wow!

Works like a dream. Thanks very much for that. It really adds functionality.

 

[iklotzko]

How could we modify this to work with a pre-existing value, i.e. edit mode. Note, we don't *yet* have 1.5 to take advantage of limitToList