转载 http://blog.csdn.net/zoyocean/article/details/43445921
说明:EasyUI版本1.3.4,jQuery版本1.8.3
这里说的模糊查询指在输入框输入,然后自动在下拉框中显示匹配结果,类似Google搜索提示
EasyUI库已经实现了combobox的查询过滤功能,但只能从头匹配,原因是EasyUI库的代码限制:
- filter: function(q, row){
- var opts = $(this).combobox('options');
- return row[opts.textField].indexOf(q) == 0;
- }
- $('#businessCityNo').combobox({
- valueField : 'businessCityNo',
- textField : 'businessCityName',
- editable:true ,
- required: true,
- filter: function(q, row){
- var opts = $(this).combobox('options');
- return row[opts.textField].indexOf(q) >= 0;//这里改成>=即可在任意地方匹配
- },
- data : d.rows,
- });
- $.fn.combobox.defaults.filter = function(q, row){
- var opts = $(this).combobox('options');
- return row[opts.textField].indexOf(q) >= 0;
- }
The properties extend from combo, below is the added properties for combobox.
Name | Type | Description | Default |
---|---|---|---|
valueField | string | The underlying data value name to bind to this ComboBox. | value |
textField | string | The underlying data field name to bind to this ComboBox. | text |
groupField | string | Indicate what field to be grouped. Available since version 1.3.4. | null |
groupFormatter | function(group) | return group text to display on group item. Available since version 1.3.4. Code example: $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } }); |
|
mode | string | Defines how to load list data when text changed. Set to 'remote' if the combobox loads from server. When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data. | local |
url | string | A URL to load list data from remote. | null |
method | string | The http method to retrieve data. | post |
data | array | The list data to be loaded. Code example: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" /> | null |
filter | function | Defines how to filter the local data when 'mode' is set to 'local'. The function takes two parameters: q: the user typed text. row: the list row data. Return true to allow the row to be displayed. Code example: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } }); |
|
formatter | function | Defineds how to render the row. The function takes one parameter: row. Code example: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } }); |
|
loader | function(param,success,error) | Defines how to load data from remote server. Return false can abort this action. This function takes following parameters: param: the parameter object to pass to remote server. success(data): the callback function that will be called when retrieve data successfully. error(): the callback function that will be called when failed to retrieve data. | json loader |
loadFilter | function(data) | Return the filtered data to display. Available since version 1.3.3. |
但是,EasyUI并没有为combotree提供filter属性,也就是说没有重写filter方法的根据,官方文档提到combotree就一个属性:
The properties extend from combo and tree, below is the overridden properties for combotree.
Name | Type | Description | Default |
---|---|---|---|
editable | boolean | Defines if user can type text directly into the field. | false |
- (function(){
- $.fn.combotree.defaults.editable = true;
- $.extend($.fn.combotree.defaults.keyHandler,{
- up:function(){
- console.log('up');
- },
- down:function(){
- console.log('down');
- },
- enter:function(){
- console.log('enter');
- },
- query:function(q){
- var t = $(this).combotree('tree');
- var nodes = t.tree('getChildren');
- for(var i=0; i<nodes.length; i++){
- var node = nodes[i];
- if (node.text.indexOf(q) >= 0){
- $(node.target).show();
- } else {
- $(node.target).hide();
- }
- }
- var opts = $(this).combotree('options');
- if (!opts.hasSetEvents){
- opts.hasSetEvents = true;
- var onShowPanel = opts.onShowPanel;
- opts.onShowPanel = function(){
- var nodes = t.tree('getChildren');
- for(var i=0; i<nodes.length; i++){
- $(nodes[i].target).show();
- }
- onShowPanel.call(this);
- };
- $(this).combo('options').onShowPanel = opts.onShowPanel;
- }
- }
- });
- })(jQuery);
效果如下:
总结:让EasyUI的combobox和combotree同时支持自定义模糊查询,在不更改其他代码的情况下,添加以下代码就行了:
- /**
- * combobox和combotree模糊查询
- */
- (function(){
- //combobox可编辑,自定义模糊查询
- $.fn.combobox.defaults.editable = true;
- $.fn.combobox.defaults.filter = function(q, row){
- var opts = $(this).combobox('options');
- return row[opts.textField].indexOf(q) >= 0;
- };
- //combotree可编辑,自定义模糊查询
- $.fn.combotree.defaults.editable = true;
- $.extend($.fn.combotree.defaults.keyHandler,{
- up:function(){
- console.log('up');
- },
- down:function(){
- console.log('down');
- },
- enter:function(){
- console.log('enter');
- },
- query:function(q){
- var t = $(this).combotree('tree');
- var nodes = t.tree('getChildren');
- for(var i=0; i<nodes.length; i++){
- var node = nodes[i];
- if (node.text.indexOf(q) >= 0){
- $(node.target).show();
- } else {
- $(node.target).hide();
- }
- }
- var opts = $(this).combotree('options');
- if (!opts.hasSetEvents){
- opts.hasSetEvents = true;
- var onShowPanel = opts.onShowPanel;
- opts.onShowPanel = function(){
- var nodes = t.tree('getChildren');
- for(var i=0; i<nodes.length; i++){
- $(nodes[i].target).show();
- }
- onShowPanel.call(this);
- };
- $(this).combo('options').onShowPanel = opts.onShowPanel;
- }
- }
- });
- })(jQuery);