BrandSNew Autocomplete

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar). The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server. In the JSON example above a callback function is passed to the autoSuggest instance. It is called when the user selects an entry, and inserts the entry id into a hidden field (visible for this example).

Download code Visit demo

Tags: autocomplete

<< Dhtml Autocomplete SlideShow Viewer >>

BrandSNew Autocomplete demo

Changes to the code below will update the demo above in real time.

<title>Ajax auto-suggest / auto-complete | BrandSpankingNew</title>
<script type="text/javascript" src="javascript/bsn.AutoSuggest_c_2.0.js"></script>
<link rel="stylesheet" href="css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />

</style>

</head>
<body>

<h1>Autosuggest / Autocomplete with Ajax <small>v. 2.0</small></h1>
  <form method="get" action="">
  	<small style="float:right">Hidden ID Field: <input type="text" id="testid" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
  	<label for="testinput">Person (try 'James', 'Scott', 'Pratt' etc)</label>
  	<input style="width: 200px" type="text" id="testinput" value="" /> 
  	<input type="submit" value="submit" />
  </form>
<ul>
	<li>Optional JSON Support</li>
	<li>Callback function support (set ID when user selects list item, or anything else...)</li>
	<li>Display extra information (see XML example below)</li>
	<li>Am optional message can be displayed when no results are returned</li>
	<li>Completes field when enter key is pressed</li>
	<li>Slick new look (2.0 ready!) inspired by <a href="http://www.inquisitorx.com/safari/" title="spotlight for the web">Inquisitor</a></li>
	<li>Matching input is highlighted in the list</li>
	<li>Fade effect!</li>
	<li>Available as a single, bundled JS file</li>
	<li>More feature, less bug</li>
	<li>CSS provided in an external folder, for easy tinkering</li>
</ul>
</div>
</div>

</body>
</html>

Oct. 29, 2007, 5:05 a.m. - shekhar: wow it beuty man
Nov. 24, 2007, 11:30 p.m. - Rasegan: Nice one keep it up
Dec. 13, 2007, 10:15 a.m. - Drew Foster: I am most impressed with this. Amazing! Just curious: Is there any way to create this using a A-Z 0-9 link list (alphabetical listing) that when you mouse over each letter/number, a dropdown gets populated with content starting with the letter associated with the link? I am just trying to figure out a way to get rid of the type in form field. In my opinion, giving users a blank form field is a bit confusing. But when you guide them using an alphabetical index A|B|C|D etc... you are already steering them to what to associated content. Think phone book...how do you find stuff in it? Alphabetically by topic... Any feedback on this? Thanks! Please keep up the good work!
July 15, 2008, 5:23 a.m. - Game Freekz: Great work! I think that I'm gonna take this script apart and learn from it
Nov. 1, 2008, 9:29 a.m. - Ali Keskinkilic: Turizm Sirketi
June 7, 2009, 4:22 p.m. - Web developer: I like this version of autocomplete. Looks really nice and doesn't require tons of code
Aug. 4, 2009, 1:33 a.m. - Naresh: Great user interface. Am going to copy and learn from this.
Nov. 23, 2009, 8:47 p.m. - Rob: get an error when trying to download.
Dec. 15, 2009, 4:28 p.m. - Kayton Knax: The only problem I have ever found with this script is that in IE if the list goes over a combo (select) box the combo box remains on top. Still great though
Jan. 19, 2010, 3:55 a.m. - Adrian: I am searching through 2 different tables and merging the information together. Is it possible to put in a header that is non-selectable?
Feb. 22, 2010, 11:26 p.m. - Ali B: The only thing i wanted to ask you is can we make this Unobtrusive?
July 16, 2010, 9:14 a.m. - Anil: The script is good but has one major issue that the suggestion box doesn't closes if I click outside the suggestion box. all major suggestion box work like this. It should close down immediately after I click outside the suggestion box and should not wait for the time out. Please help me how can this be solved.
Sept. 29, 2010, 6:32 a.m. - dzaad: This is wonderful. thanks for the developers. is there any way to show all the items for on click and then filter according to the text typed in the text box.. :)
Jan. 5, 2011, 5:05 p.m. - marco: How would I associate a URL to every item, so that clicking the ajax autopopulated objects would open up a link?
April 18, 2011, 5 a.m. - vijay: can i use jsp file instead of test.php if yes tell me how can i fetch value from my database , ineed simple instruction to fetch employee name corresponding employee id