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.

Web 2.0 Box Generator

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

Huy.zhu

2010-01-25 19:41:16

When the page use the mootools slide effect, tips added to the page, the tips can be used, but the sliding effect is null and void

Jameswilliam

2009-12-02 01:51:57

Yesterday I wrote a post describing why I decided to switch from MooTools to jQuery, and today I have my first small comparison between the two. For one project that I am working on I have a simple autocomplete text input, and below I will show how I completed this little task in both MooTools and jQuery. I am using plugins for both of the frameworks in order to accomplish this task, so this doesn't truly compare the functionality of the framework. But, this is a common task that I have and it starts to give me a feel for how the two match up. The data returned from the server side script is different for each of these two methods debit cards. The MooTools Method gets an array returned, whereas the jQuery method gets the results returned as a newline delimited file (one autocomplete suggestion per line).

Smashit

2009-03-10 07:44:55

nice autocomplete script !!

Mudasser

2009-02-17 03:18:04

what would be the case if i also want to get option ids (values) without displaying in the drop down.

Ddm57

2008-12-12 07:12:48

Where whrite in injectChoice: ?? because the script inject the first form on my page... plz help me. sry for my english it s because i'm french xD thx. ddm

Snowcore

2008-10-21 02:09:02

Very nice example. I think it is the best from all autocomplete examples for mootools

Benji

2008-10-06 05:57:05

How can i use this example with mootools1.1

Marcin

2008-09-28 10:17:09

Why can't I use the UP and DOWN keys to browse through the drop down list? Usually when you have at least 2 results, you should be able to move up and down within that list.

R Walsh

2008-08-11 07:20:00

I would like to add multiple autocompleters to my page using the method for completer1, I can make the tokens no problem, but getting it to read to different inputs is where I'm having the issue. Any ideas?

DesiTech

2008-05-23 07:27:59

Nice work. Any idea how to tie up with DB either using any tech php or jsp.

Pucto

2008-05-10 15:15:03

i want this example in a zip file with all the relecant files

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