EasyUI combobox drop-down list to achieve search filters (fuzzy match)

　　A drop-down list in the project up to more than 200, so a huge number of glasses had to look to find a flower, so you have the whole of the search function. There can only see posts by others online prefix matching program, but only if the prefix match with them is not very convenient. So we recorded about fuzzy matching program.

Achieve results:

As used herein, the combobox combo box, can be used to create the combobox <input> input box, may be used <select> is selected from the pull-down. I use a <select>:

HTML code

< Label > associated program </ label > 
< SELECT class = "easyui-ComboBox" name = "itemsId" ID = "itemsId" style = "width: 135px; height: 25px;" > 
    < Option > select the associated program </ Option > 
</ SELECT >

Then get the data from a remote js and implement search:

$ ( "# itemsId" ) .combobox ({ 
                 URL: "xxxxxx" , 
                 the editable: to true , 
                 ValueField: 'ID' , 
                 the textField: 'name' , 
                 panelWidth: 220 , // drop-down box width 
                 panelHeight: 250 , drop-down box // height 
                 filter: function (Q, Row) {
                      var the opts = $ ( the this ) .combobox ( 'Options' );
                      return Row [opts.textField] .indexOf (Q)> -1 ;  
                 }
            });    

Because you need to enter the query, so the drop-down items have to be edited. Use the drop-down combobox create default entries can be edited, set the editable: true, although I feel very sad, but it seems function more clearly.

filter: how to define the functions of data filtering, R & lt eturn Row [ the opts . the textField ]. the indexOf ( Q ) == only matching prefix 0, return row [opts.textField] .indexOf ( q)> -1 it is a fuzzy matching.

 

　　Such fuzzy matching function is realized. Just record what the problem is displayed by default values.

The default display value was set when modifying data, which is loaded option selected = true, first I want to use the data formatter function to get a list of the selected item to add selected property is true, but this approach can lead to the drop-down list is displayed as blank

 

So this approach is not feasible, so he sought other ways and found a solution:

By combobox select the method:

Simply add the following line of code on the line, before and after the combobox can be created.

$("#itemsId").combobox("select", rows.name)

This is specified by the selected method combobox select an option, "rows.name" option may be of value, you can also text.

Of course, can also onLoadSuccess event combobox, handling remote data loaded successfully from (in this way would be too cumbersome, and just for the record about the use of onLoadSuccess):

$("#itemsId").combobox({
                 url: 'xxxx',
                 editable: true, 
                 valueField: 'id',
                 textField: 'kcName',
                 panelWidth: 220,
                 panelHeight: 250,
                 filter: function(q, row){
                     var opts = $(this).combobox('options');
                     return row[opts.textField].indexOf(q) > -1;
                 }, 
                 onLoadSuccess: function(data) {
                     for(var i = 0; i < data.length; i++) {
                         if(data[i].id == rows.itemsId) {
                             $("#itemsId").combobox("select", data[i].id)
                         }
                     }
                 }
            });