Next Prev

BrandSNew Autocomplete

Read more and download "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).

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/bsn-autocomplete/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<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 type="text/css">
	#wrapper {
		width: 500px;
		margin: 10px auto;
		text-align: left;
	}
	#content {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	#content h1 {
		font-size: 1.6em;
		border-bottom: 1px solid #ccc;
		padding: 5px 0 5px 0;
	}
	#content h2 {
		font-size: 1.2em;
		margin-top: 3em;
	}
	label
	{
		font-weight: bold;
	}

</style>


</head>
<body>

<div id="wrapper">
<div id="content">

<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>

<script type="text/javascript">
	var options = {
		script:"test.php?json=true&",
		varname:"input",
		json:true,
		callback: function (obj) { document.getElementById('testid').value = obj.id; }
	};
	var as_json = new AutoSuggest('testinput', options);
	
	
	var options_xml = {
		script:"test.php?",
		varname:"input"
	};
	var as_xml = new AutoSuggest('testinput_xml', options_xml);
</script>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Drew Foster

2007-12-13 10:15:23

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!

Rasegan

2007-11-24 23:30:24

Nice one keep it up

Shekhar

2007-10-29 05:05:49

wow it beuty man

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

BrandSNew Autocomplete

Comment on this example