jQuery UI Autocomplete and LiquidMetal

08 Apr 2011

By default, the jQuery UI Autocomplete widget filters the source data using a very basic regular expression match: 
  filter: function(array, term) {
		var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
		return $.grep( array, function(value) {
			return matcher.test( value.label || value.value || value );
		});
	}
source
While this works, it doesn't provide relevancy ranking or near-matches, both of which are important when selecting from long lists of values, some of which are not well-known or contain a significant number of obscure items. To address this, I added a custom data source to the Autcomplete widget that uses the LiquidMetal library, which is a refinement of the Quicksilver scoring algorithm. 
		source: function(request, response ) { 
			var arr;

			if(request.term == "")  {
			return response(data);
			}

			arr = $.map(data, function(value) {
				var score = LiquidMetal.score(value, request.term);
				if(score < 0.5) {
				  return null; // jQuery.map compacts null values
				}
				return { 'value': value, 'score': LiquidMetal.score(value, request.term) };
			});

			arr = arr.sort(function(a,b) { return a['score'] < b['score'] }) ;
		  	return response( $.map(arr, function(value) { return  value['value']; }) );
		}
demo
Surprisingly easy.