<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Auto Complete Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.autocomplete.js" type="text/javascript"></script>
</head>
<body>
<hr />
<h2>You can add your css to style things accordingly, the suggestion box will have a class of "autocomplete_placeholder" by default</h2>
<form>
<label for="demo" style="color:red;font-weight:bold;">Type your search term here:</label> <input name="demo" id="demo" class="autocomplete" placeholder="Please Enter Your Text" />
</form>
<div class="resultset"></div>
<hr />
<h2>The following data are added to auto complete</h2>
<h3>selector: select option</h3>
<select class="data" name="item1">
<option value="Movie Tango">Movie Tango</option>
<option value="Fast and Furious">Fast and Furious</option>
<option value="Happy Feet">Happy Feet</option>
<option value="Titanic">Titanic</option>
<option value="Facebook Movie">Facebook Movie</option>
<option value="Tourist">Tourist</option>
</select>
<h3>selector: .data-1 span</h3>
<div class="data-1">
<span>Backstreet Boy</span>
<span>Celine Dion</span>
<span>Elton John</span>
<span>Celtic Woman</span>
</div>
<h3>selector: .data-2</h3>
<div class="data-2">
This is for fun|
Today is Sunny|
This is auto complete|
Why it takes so long
</div>
<hr />
<h2>Please read the js file for more details</h2>
In this demo, basically, it is how it setup<br />
<code>$('.autocomplete').autocomplete({srcFrom:"select option, .data-1 span, .data-2",autoCloseAfterSelect: false, delimiter:"|"});</code>
</body>
</html>
|
Stumble It!
Bookmark in del.icio.us
Download
