ANOTHER JQUERY AUTO COMPLETE
twitter: ukwebdeveloper
github: ukwebdeveloper

BASIC USAGE :

$('#autoComplete').autoComplete({'url' : "data.php"}); // the file is required, this is very basic, there is currently no alternative data source

OPTIONS :

$('#autoComplete').autoComplete({	
	'url' : "data.php", // the location of the file that returns a JSON array containing label / id objects - example data.php uses json_encode .
	'minchars' : 1 // the number of characters that are required before the ajax call is made to the above url to check for results
	});
	
DETAILS :
	
Add a HTML input element to the document body and call $('#autoComplete').autoComplete({'url' : "data.php"}); onload.

When a search result is selected the ID returned from the JSON array is passed into a hidden field that takes on the name of the original input element. (the original input element has its name removed).

The additional mark up that is added is shown below :

RAW HTML :
	
<input type="text" id="autoComplete" name="searchField" />

ONLOAD :

<div class="autoComplete-holder">
	<input class="autoComplete-hiddenField" type="hidden" name="searchField">
	<input id="autoComplete" class="autoComplete-active" type="text">
</div>

WITH SEARCH RESULTS :

<div class="autoComplete-holder">
	<input class="autoComplete-hiddenField" type="hidden" name="searchField">
	<input id="autoComplete" class="autoComplete-active" type="text">
	<div class="list-holder" style="position:absolute;left:400px;top:222px;width:498px;"> <!-- NOTE : left, top and width are calculated from the original input element and offset accordingly -->
		<ul>
			<li id="1">Testing</li>
			<li id="5">Content</li>
			<li id="6">Cotent from somewhere</li>
		</ul>
	</div>
</div>

AFTER SEARCH RESULT HAS BEEN SELECTED :

<div class="autoComplete-holder">
<input class="autoComplete-hiddenField" type="hidden" name="searchField" value="1"> <!-- NOTE : The value of "serachField" this is the value from the ID of the LI selected. -->
<input id="autoComplete" class="autoComplete-active" type="text">
</div>