Extjs 3 implements pinyin filtering in the Combobox drop-down list

Extjs 3 implements pinyin filtering in the Combobox drop-down list

The drop-down list is a commonly used form element. It can be used to replace manual input through options to improve input efficiency and accuracy. however, if there are too many options in the drop-down list, the selection may cause inconvenience and reduce the input efficiency.

For example, in the 12306 train ticket booking system, it is very difficult to select from the drop-down list in the sending and arrival boxes. in daily use, you often use the input pinyin initials (simple spelling, audio order) method for Option filtering. Now we try to use this method in Extjs3. For other Extjs versions, refer.

 

There are many ways to get the corresponding pinyin through Chinese characters. the first approach is to add fields to the database to save the shortlist of options. This approach requires the operator to manually maintain the shortlist of options, maybe not as expected.

In addition, you need to translate in the code, either in the background code or on the front-end page. A processing method is provided at the front-end. you can download a small javascript code tool for converting Chinese characters to pinyin. the function can be called to achieve the desired purpose (unfortunately, there is no good way to do that for polyphonic words ).

 

 

 

REFERENCE The chinesePY. js file and pay attention to the encoding format when adding the project. If the code is garbled, the file cannot be translated. The following code is written:

 

Var testStore = new Ext. data. Store ({proxy: new Ext. data. HttpProxy ({url: 'formdemo. do? ReqCode = queryAreaDatas '// available for background query}), reader: new Ext. data. jsonReader ({}, [{name: 'value'}, {name: 'text'}]), listeners: {load: function (pStore, option) {// translate the text of each record into a simple pStore during loading. each (function (record) {var text = record. get ('text'); var code = Pinyin. getJP (text); // obtain Chinese and call the function to obtain the corresponding simple record. set ('code', code) ;}}}); testStore. load ();

 

Var testCombo = new Ext. form. comboBox ({hiddenName: 'testcombo ', fieldLabel: 'administrative region', emptyText:' select... ', triggerAction: 'all', store: testStore, displayField: 'text', valueField: 'value', loadingText:' loading data... ', mode: 'local', forceSelection: true, typeAhead: true, resizable: true, editable: true, anchor: '2016', listeners: {focus: {fn: function (e) {e. expand (); this. doQuery (this. allQuery, true) ;}, Buffer: 200}, beforequery: function (e) {// filter by the store code when entering pinyin in the text box, in the drop-down list, only the option var combo = e. combo; if (! E. forceAll) {var input = e. query; var regExp = new RegExp (^ + input +. *, I); combo. store. filterBy (function (record, id) {var text = record. get ('code'); return regExp. test (text) ;}); combo. expand (); combo. select (0, true); // point the cursor to the first item in the drop-down list by default, so that when appropriate options are obtained, use the up and down arrow keys and press enter to select the expected result "return false ;}}}});

The execution result is as follows: