A basic light weight auto complete
JavaScript PHP
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README
data.php
index.html
jquery.autocomplete.css
jquery.autocomplete.js
jquery.autocomplete.min.js

README

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>