Next Prev

MooTools Autocomplete

Read more and download "MooTools Autocomplete"

A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source.
Example in the Playground which includes an Local, Json and Ajax Autocompleter.
Compatibility

Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)

Features

All classes extend the base class Autocompleter.Base, which provides all basic features to create an Autocompleter from any provided source. Both, Ajax.Json and Ajax.Json extend Autocompleter.Ajax.Base, which handles the query request and response.

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/mootools/autocomplete/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>digitarald.de » Playground - Widget Birthplace</title>
	
  <link rel="stylesheet" href="css/Autocompleter.css" type="text/css" media="screen">

	<script type="text/javascript" src="javascript/mootools.v1.11.js"></script>
	<script type="text/javascript" src="javascript/Observer.js"></script>
	<script type="text/javascript" src="javascript/Autocompleter.js"></script>

</head>
  <body>
	<div id="container">
		<h1>moo.Playground</h1>
		<p>Json and Xhtml Version - Backend is a flatfile database with 6Mb spanish dictonary. So its maybe too slow sometimes ;)</p>

		<form action="#" method="post">
      <fieldset>
				<legend>Local - enter a country name</legend>
				<input autocomplete="off" name="search" type="text"><br>
      </fieldset>

			<fieldset>
				<legend>Ajax.Json - enter any string - random result returned from server</legend>

				<input autocomplete="off" name="search" type="text">
				<div style="display: none;" class="autocompleter-loading"></div><br>

				<select name="select-1">
					<option>Spanish Dictionary</option>
					<option disabled="disabled">Debugging SelectBox</option>
					<option disabled="disabled">To Check IE bug.</option>
				</select>
			</fieldset>
			
		</form>

	</div>
  	<script type="text/javascript">
      window.addEvent('domready', function(){
			var el = $ES('input');
			var tokens = [['Afghanistan', 'Af'], ['Åland Islands', 'Ax'], ['Albania', 'Al'], ['Algeria', 'Dz'], ['American Samoa', 'As'], ['Andorra', 'Ad'], ['Angola', 'Ao'], ['Anguilla', 'Ai'], ['Antarctica', 'Aq'], ['Antigua And Barbuda', 'Ag'], ['Argentina', 'Ar'], ['Armenia', 'Am'], ['Aruba', 'Aw'], ['Australia', 'Au'], ['Austria', 'At'], ['Azerbaijan', 'Az'], ['Bahamas', 'Bs'], ['Bahrain', 'Bh'], ['Bangladesh', 'Bd'], ['Barbados', 'Bb'], ['Belarus', 'By'], ['Belgium', 'Be'], ['Belize', 'Bz'], ['Benin', 'Bj'], ['Bermuda', 'Bm'], ['Bhutan', 'Bt'], ['Bolivia', 'Bo'], ['Bosnia And Herzegovina', 'Ba'], ['Botswana', 'Bw'], ['Bouvet Island', 'Bv'], ['Brazil', 'Br'], ['British Indian Ocean Territory', 'Io'], ['Brunei Darussalam', 'Bn'], ['Bulgaria', 'Bg'], ['Burkina Faso', 'Bf'], ['Burundi', 'Bi'], ['Cambodia', 'Kh'], ['Cameroon', 'Cm'], ['Canada', 'Ca'], ['Cape Verde', 'Cv'], ['Cayman Islands', 'Ky'], ['Central African Republic', 'Cf'], ['Chad', 'Td'], ['Chile', 'Cl'], ['China', 'Cn'], ['Christmas Island', 'Cx'], ['Cocos (Keeling) Islands', 'Cc'], ['Colombia', 'Co'], ['Comoros', 'Km'], ['Congo', 'Cg'], ['Congo, The Democratic Republic Of The', 'Cd'], ['Cook Islands', 'Ck'], ['Costa Rica', 'Cr'], ['Cote D\'ivoire', 'Ci'], ['Croatia', 'Hr'], ['Cuba', 'Cu'], ['Cyprus', 'Cy'], ['Czech Republic', 'Cz'], ['Denmark', 'Dk'], ['Djibouti', 'Dj'], ['Dominica', 'Dm'], ['Dominican Republic', 'Do'], ['Ecuador', 'Ec'], ['Egypt', 'Eg'], ['El Salvador', 'Sv'], ['Equatorial Guinea', 'Gq'], ['Eritrea', 'Er'], ['Estonia', 'Ee'], ['Ethiopia', 'Et'], ['Falkland Islands (Malvinas)', 'Fk'], ['Faroe Islands', 'Fo'], ['Fiji', 'Fj'], ['Finland', 'Fi'], ['France', 'Fr'], ['French Guiana', 'Gf'], ['French Polynesia', 'Pf'], ['French Southern Territories', 'Tf'], ['Gabon', 'Ga'], ['Gambia', 'Gm'], ['Georgia', 'Ge'], ['Germany', 'De'], ['Ghana', 'Gh'], ['Gibraltar', 'Gi'], ['Greece', 'Gr'], ['Greenland', 'Gl'], ['Grenada', 'Gd'], ['Guadeloupe', 'Gp'], ['Guam', 'Gu'], ['Guatemala', 'Gt'], ['Guernsey', 'Gg'], ['Guinea', 'Gn'], ['Guinea-Bissau', 'Gw'], ['Guyana', 'Gy'], ['Haiti', 'Ht'], ['Heard Island And Mcdonald Islands', 'Hm'], ['Holy See (Vatican City State)', 'Va'], ['Honduras', 'Hn'], ['Hong Kong', 'Hk'], ['Hungary', 'Hu'], ['Iceland', 'Is'], ['India', 'In'], ['Indonesia', 'Id'], ['Iran, Islamic Republic Of', 'Ir'], ['Iraq', 'Iq'], ['Ireland', 'Ie'], ['Isle Of Man', 'Im'], ['Israel', 'Il'], ['Italy', 'It'], ['Jamaica', 'Jm'], ['Japan', 'Jp'], ['Jersey', 'Je'], ['Jordan', 'Jo'], ['Kazakhstan', 'Kz'], ['Kenya', 'Ke'], ['Kiribati', 'Ki'], ['Korea, Democratic People\'s Republic Of', 'Kp'], ['Korea, Republic Of', 'Kr'], ['Kuwait', 'Kw'], ['Kyrgyzstan', 'Kg'], ['Lao People\'s Democratic Republic', 'La'], ['Latvia', 'Lv'], ['Lebanon', 'Lb'], ['Lesotho', 'Ls'], ['Liberia', 'Lr'], ['Libyan Arab Jamahiriya', 'Ly'], ['Liechtenstein', 'Li'], ['Lithuania', 'Lt'], ['Luxembourg', 'Lu'], ['Macao', 'Mo'], ['Macedonia, The Former Yugoslav Republic Of', 'Mk'], ['Madagascar', 'Mg'], ['Malawi', 'Mw'], ['Malaysia', 'My'], ['Maldives', 'Mv'], ['Mali', 'Ml'], ['Malta', 'Mt'], ['Marshall Islands', 'Mh'], ['Martinique', 'Mq'], ['Mauritania', 'Mr'], ['Mauritius', 'Mu'], ['Mayotte', 'Yt'], ['Mexico', 'Mx'], ['Micronesia, Federated States Of', 'Fm'], ['Moldova, Republic Of', 'Md'], ['Monaco', 'Mc'], ['Mongolia', 'Mn'], ['Montenegro', 'Me'], ['Montserrat', 'Ms'], ['Morocco', 'Ma'], ['Mozambique', 'Mz'], ['Myanmar', 'Mm'], ['Namibia', 'Na'], ['Nauru', 'Nr'], ['Nepal', 'Np'], ['Netherlands', 'Nl'], ['Netherlands Antilles', 'An'], ['New Caledonia', 'Nc'], ['New Zealand', 'Nz'], ['Nicaragua', 'Ni'], ['Niger', 'Ne'], ['Nigeria', 'Ng'], ['Niue', 'Nu'], ['Norfolk Island', 'Nf'], ['Northern Mariana Islands', 'Mp'], ['Norway', 'No'], ['Oman', 'Om'], ['Pakistan', 'Pk'], ['Palau', 'Pw'], ['Palestinian Territory, Occupied', 'Ps'], ['Panama', 'Pa'], ['Papua New Guinea', 'Pg'], ['Paraguay', 'Py'], ['Peru', 'Pe'], ['Philippines', 'Ph'], ['Pitcairn', 'Pn'], ['Poland', 'Pl'], ['Portugal', 'Pt'], ['Puerto Rico', 'Pr'], ['Qatar', 'Qa'], ['Reunion', 'Re'], ['Romania', 'Ro'], ['Russian Federation', 'Ru'], ['Rwanda', 'Rw'], ['Saint Helena', 'Sh'], ['Saint Kitts And Nevis', 'Kn'], ['Saint Lucia', 'Lc'], ['Saint Pierre And Miquelon', 'Pm'], ['Saint Vincent And The Grenadines', 'Vc'], ['Samoa', 'Ws'], ['San Marino', 'Sm'], ['Sao Tome And Principe', 'St'], ['Saudi Arabia', 'Sa'], ['Senegal', 'Sn'], ['Serbia', 'Rs'], ['Seychelles', 'Sc'], ['Sierra Leone', 'Sl'], ['Singapore', 'Sg'], ['Slovakia', 'Sk'], ['Slovenia', 'Si'], ['Solomon Islands', 'Sb'], ['Somalia', 'So'], ['South Africa', 'Za'], ['South Georgia And The South Sandwich Islands', 'Gs'], ['Spain', 'Es'], ['Sri Lanka', 'Lk'], ['Sudan', 'Sd'], ['Suriname', 'Sr'], ['Svalbard And Jan Mayen', 'Sj'], ['Swaziland', 'Sz'], ['Sweden', 'Se'], ['Switzerland', 'Ch'], ['Syrian Arab Republic', 'Sy'], ['Taiwan, Independent Country', 'Tw'], ['Tajikistan', 'Tj'], ['Tanzania, United Republic Of', 'Tz'], ['Thailand', 'Th'], ['Timor-Leste', 'Tl'], ['Togo', 'Tg'], ['Tokelau', 'Tk'], ['Tonga', 'To'], ['Trinidad And Tobago', 'Tt'], ['Tunisia', 'Tn'], ['Turkey', 'Tr'], ['Turkmenistan', 'Tm'], ['Turks And Caicos Islands', 'Tc'], ['Tuvalu', 'Tv'], ['Uganda', 'Ug'], ['Ukraine', 'Ua'], ['United Arab Emirates', 'Ae'], ['United Kingdom', 'Gb'], ['United States', 'Us'], ['United States Minor Outlying Islands', 'Um'], ['Uruguay', 'Uy'], ['Uzbekistan', 'Uz'], ['Vanuatu', 'Vu'], ['Venezuela', 'Ve'], ['Viet Nam', 'Vn'], ['Virgin Islands, British', 'Vg'], ['Virgin Islands, U.S.', 'Vi'], ['Wallis And Futuna', 'Wf'], ['Western Sahara', 'Eh'], ['Yemen', 'Ye'], ['Zambia', 'Zm'], ['Zimbabwe', 'Zw']]

			var completer1 = new Autocompleter.Local(el[0], tokens, {
				'delay': 100,
				'filterTokens': function() {
					var regex = new RegExp('^' + this.queryValue.escapeRegExp(), 'i');
					return this.tokens.filter(function(token){
						return (regex.test(token[0]) || regex.test(token[1]));
					});
				},
				'injectChoice': function(choice) {
					var el = new Element('li')
						.setHTML(this.markQueryValue(choice[0]))
						.adopt(new Element('span', {'class': 'example-info'}).setHTML(this.markQueryValue(choice[1])));
					el.inputValue = choice[0];
					this.addChoiceEvents(el).injectInside(this.choices);
				}
			});
			var indicator2 = new Element('div', {'class': 'autocompleter-loading', 'styles': {'display': 'none'}}).setHTML('').injectAfter(el[1]);
			var completer2 = new Autocompleter.Ajax.Json(el[1], 'server/auto.php', {
				'onRequest': function(el) {
					indicator2.setStyle('display', '');
				},
				'onComplete': function(el) {
					indicator2.setStyle('display', 'none');
				}
			});
		});
	</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

Harald Aka Digitarald

2008-03-04 02:29:03

Visit digitarald.de for the real project site and a better demo. Thx for sharing content from my site, ajaxdaddy ;) The country list is from the International Components for Unicode library, don't mix this demo up with political ideas, thx.

The World

2008-02-26 04:28:41

The rest of *our* world will kick your ass, Wu Xia, for playing with nuclear weapons! P.S. nice autocompletion

Jonas

2007-12-29 20:16:24

Is this digitarald's script?

Wu Xia

2007-12-01 12:12:36

Taiwan will kick China's ass in a nuclear war!

Xiaoyo

2007-10-16 18:32:14

Hi, Very nice and Taiwan is an Integral Part of Chinese Territory，it is NOT a COUNTRY! Please remove the words "Independent Country".

Jacques

2007-10-09 03:03:37

Taiwan is an country without the foreign affairs ,hehe

Gustav

2007-09-22 03:13:24

Very cool!

Luxbot

2007-09-21 21:07:36

Oh wow! your website is incredible!

Nice

2007-08-20 03:00:49

really nice

CHWu

2007-07-22 23:53:40

Thanks for your modification.

CHWu

2007-07-19 19:16:22

Hi,I am a Taiwaness. We can't agree our country name is "Province Of China". Taiwan is NOT a part of China! We are an independence country. Please remove the words "Province Of China".

Soundtraker

2007-07-12 15:14:49

Hi, Very nice. How can we add an url?

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

MooTools Autocomplete

Comment on this example