Filter Select Boxes by Typing

Back to Blog

Download

Filter this item by typing State name, capital, or nick name. All 3 are visible in the dropdown text.

$('#select1').selectfilter();

Filter this dropdown by state name, capital or nickname. However this select has values of "StateName, Capital" and only the nickname is visible. This demonstrates searching the value and text.

$('#select2').selectfilter();

Filter this select by typing any part of the state bird name or the state name.

$('#select3').selectfilter();

Use a custom filter to find items. This time the searchable options have data-state="" and data-capital="" populated so you can type the name of the state, capital, or abbreviation and filter.

$('#select4').selectfilter({
	filter: function(query, re, previous_results, all_options){
		$t = $(this); //the option
		if( re.test($t.data('state')) || re.test($t.data('capital')) || 
				re.test($t.attr('value')) || re.test($t.text()) )
			return true;
	}
});