File: autocomplete.html

Recommend this page to a friend!
  Classes of Roy Yu   Simple Auto Complete   autocomplete.html   Download  
File: autocomplete.html
Role: Example script
Content type: text/plain
Description: dummy html
Class: Simple Auto Complete
Auto-complete input text from data in the page
Author: By
Last change:
Date: 12 years ago
Size: 2,020 bytes
 

Contents

Class file image Download
<!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>