Connects to a server and populates a box with matches.

Download: [Release] (https://github.com/manngo/typeahead/releases/download/0.1/typeahead.js "Initial Release")

1. A form with a textbox for input. This will used for typeahead, so it needs to be identifiable. In the sample below, the form has an id, and the textbox has a name.
2. A server prepared to respond to an GET request, returning some sort of data in JSON format. It should represent an array of objects.

typeAhead(element,url,template,callback);

HTML

<form id="test">
	<input name="data">
</form>

JS

var element='form#test input[name="data"]';
var url='http://…';
var template='[item] [item]';
function callback(result) {
	//	process result
}
var options={
	"suggestions":"suggestions",
};

typeAhead(element,url,template,callback,options);

form#data input[name=town]

test

[town] [state] [postcode]

function(result) {

}

The callback function takes one parameter, which is an array with the results.

{
"suggestions": "suggestions",
};

The only option available is the selector for the selection box. This allows you to make changes to the appearance in CSS. The value takes the following format:

This release has a sample folder. To view the sample live, see http://github.manngo.net/typeahead/

The Sample file says it all, but here are the important parts:

<script type="text/javascript" src="typeahead.js"></script>
<script type="text/javascript">
	window.onload=init;
	function init() {
		var form=document.querySelector('form#sample');
		typeAhead('form#sample input[name="town"]','http://widgets.comparity.net/postcodes.php?limit=16&town=','[locality] [state] [postcode]',function(result) {
			form['location'].value=result.locality;
			form['state'].value=result.state;
			form['postcode'].value=result.postcode;
		});
	}
	</script>

1. Consolidate input & element variables