selectfilter js bookmarklet

simple bookmarklet to insert a filter textfield just above any select element on page; which hides options from the select that don't match the search text.

by Laurens Maneschijn

HTML

<p>
  Simple bookmarklet to insert a filter textfield just above any &lt;select&gt; element on page; which hides options from the select that don't match the search text.
</p>
<p>
  Note that current implementation uses jquery selector `:contains` to match options; so it will only match options that contain that exact text, and is case sensitive.
</p>
<p>
  Also note that it only hides options, and they are still selected when hidden. This seems fairly straightforward for select single, but with select multiple it might not be as clear that hidden options are still selected.
</p>
<p>
  Drag link to bookmarks: 
  <a href="javascript:(function($){ if(!$ || !$.fn || !$.fn.on){return alert('missing $.fn.on (requires jQuery >= 1.7)');} $('.selectfilter').remove(); $('select').before('<input type=&quot;text&quot; class=&quot;selectfilter&quot; style=&quot;display:block;&quot; placeholder=&quot;filter options in select below:&quot;>'); function jq_contains_escape(str){ return str.replace(/\\/g, '\\\\').replace(/&quot;/g, '\&quot;'); } $(document.body) .off('.selectfilter') .on('change keyup keydown focus blur '.split(' ').join('.selectfilter '), '.selectfilter', function(e){ var $i = $(this), $s = $($i).nextAll('select').first(); var needle = $i.val(); $s.find('option').hide(); $s.find('option:contains(&quot;' + jq_contains_escape(needle) + '&quot;)').show(); }); })(window.$); ">$ selectfilter</a>
</p>

<hr>

<select>
  <option value="">---</option>
  <option value="1">option first</option>
  <option value="2">option 2 middle</option>
  <option value="3">option 3 middle</option>
  <option value="4">option last</option>
</select>

<hr>

<select multiple>
  <option value="">---</option>
  <option value="1">option first</option>
  <option value="2">option 2 middle</option>
  <option value="3">option 3 middle</option>
  <option value="4">option last</option>
</select>

CSS

body {background:#fff;color:#000;}

JavaScript

// javascript:
(function($){
	if(!$ || !$.fn || !$.fn.on){return alert('missing $.fn.on (requires jQuery >= 1.7)');}

	$('.selectfilter').remove();
	$('select').before('<input type="text" class="selectfilter" style="display:block;" placeholder="filter options in select below:">');

	function jq_contains_escape(str){
		return str.replace(/\\/g, '\\\\').replace(/"/g, '\"');
	}

	$(document.body)
		.off('.selectfilter')
		.on('change keyup keydown focus blur '.split(' ').join('.selectfilter '), '.selectfilter', function(e){
			var $i = $(this), $s = $($i).nextAll('select').first();
			var needle = $i.val();
			$s.find('option').hide();
			$s.find('option:contains("' + jq_contains_escape(needle) + '")').show();
	});
})(window.$);