Print Page - Combobox insensitive casse and contains search options

Title: Combobox insensitive casse and contains search options
Post by: jr on February 22, 2012, 08:26:57 AM

Hi,

I need to allow user make insentive and contains search unto combobox.

For example, if my options are :

Apple
Banana
Pineapple
Tomato

If used enter "apple", i need that both "Apple" and "Pineapple" appear in filter results.

It would be also very nice if i can highlight filter part on result.

How to achieve this ?

Regards.

PS : Sorry for my english, i'm french speaker.

Title: Re: Combobox insensitive casse and contains search options
Post by: stworthy on February 23, 2012, 12:31:28 AM

Try override combobox filter fucntion:

Code:

$.fn.combobox.defaults.filter = function(q,row){
	var opts = $(this).combobox('options');
	return row[opts.textField].indexOf(q) >= 0;
};

Title: Re: Combobox insensitive casse and contains search options
Post by: jr on February 23, 2012, 03:03:05 AM

Hi,

Thanks a lot.

It puts me on the way.

1- To handle insensitive casse, just override default filter like that (adding toUpperCase() or toLowerCase() and "== 0") :

Code:

$.fn.combobox.defaults.filter = function(q,row){
       var opts = $(this).combobox('options');
       return row[opts.textField].toUpperCase().indexOf(q.toUpperCase()) == 0;
};

2- To search inside the string like i wanted, just put ">= 0" like stworthy suggested

Code:

$.fn.combobox.defaults.filter = function(q,row){
      var opts = $(this).combobox('options');
      return row[opts.textField].toUpperCase().indexOf(q.toUpperCase()) >= 0;
};

For newbies like me, place these code outside of the jQuery $(document).ready scope, otherwise it don't works.

Thanks again, it works perfectly

Regards.

Title: Re: Combobox insensitive casse and contains search options
Post by: sky_proj on April 11, 2013, 10:06:56 PM

this function ok :
$.fn.combobox.defaults.filter = function(q,row){
var opts = $(this).combobox('options');
return row[opts.textField].toUpperCase().indexOf(q.toUpperCase()) == 0;
};

if my data:
Apple
Angle
Antenna

when i enter :
'Apple' will show 'Apple' and selected (highlight yellow show)

but when i enter :
'apple' will show Apple but nothing selected (highlight yellow not show) => this is my question how to make selected (highlight yellow show on 'Apple')

thank's

Title: Re: Combobox insensitive casse and contains search options
Post by: stworthy on April 12, 2013, 12:21:34 AM

To customize how to find and select a specified item when querying items, please override the $.fn.combobox.defaults.keyHandler.query.

Code:

<script>
(function($){
	var oldQuery = $.fn.combobox.defaults.keyHandler.query;
	$.fn.combobox.defaults.keyHandler.query = function(q){
		oldQuery.call(this, q);
		var opts = $(this).combobox('options');
		if (opts.mode == 'local'){
			var data = $(this).combobox('getData');
			for(var i=0; i<data.length; i++){
				if (data[i][opts.textField].toLowerCase() == q.toLowerCase()){
					$(this).combobox('setValue', data[i][opts.valueField]);
					return;
				}
			}
		}
	};
})(jQuery);
</script>

Title: Re: Combobox insensitive casse and contains search options
Post by: sky_proj on April 12, 2013, 08:22:39 PM

thanx's stworthy... that function it work for me!!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jr on February 22, 2012, 08:26:57 AM