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.

Download code Visit demo

Tags: autocomplete motools

<< Ajax instant edit Scriptaculous Autocomplete >>

MooTools Autocomplete demo

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

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

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

July 12, 2007, 3:14 p.m. - soundtraker: Hi, Very nice. How can we add an url?
July 19, 2007, 7:16 p.m. - CHWu: 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".
July 22, 2007, 11:53 p.m. - CHWu: Thanks for your modification.
Sept. 21, 2007, 9:07 p.m. - Luxbot: Oh wow! your website is incredible!
Oct. 9, 2007, 3:03 a.m. - Jacques: Taiwan is an country without the foreign affairs ,hehe
Oct. 16, 2007, 6:32 p.m. - xiaoyo: Hi, Very nice and Taiwan is an Integral Part of Chinese Territory，it is NOT a COUNTRY! Please remove the words "Independent Country".
Dec. 1, 2007, 12:12 p.m. - Wu Xia: Taiwan will kick China's ass in a nuclear war!
Dec. 29, 2007, 8:16 p.m. - jonas: Is this digitarald's script?
Feb. 26, 2008, 4:28 a.m. - The world: The rest of *our* world will kick your ass, Wu Xia, for playing with nuclear weapons! P.S. nice autocompletion
May 10, 2008, 3:15 p.m. - pucto: i want this example in a zip file with all the relecant files
May 23, 2008, 7:27 a.m. - DesiTech: Nice work. Any idea how to tie up with DB either using any tech php or jsp.
July 9, 2008, 7:18 p.m. - TW is not a country: taiwan is not a country, just a province of China! Please correct the fault!
July 14, 2008, 6:29 p.m. - Jack: Taiwan for life :)
Aug. 11, 2008, 7:20 a.m. - R Walsh: 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?
Sept. 28, 2008, 10:17 a.m. - Marcin: 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.
Oct. 6, 2008, 5:57 a.m. - Benji: How can i use this example with mootools1.1
Oct. 21, 2008, 2:09 a.m. - Snowcore: Very nice example. I think it is the best from all autocomplete examples for mootools
Nov. 25, 2008, 4:50 p.m. - fatih: sevdim biz bu uygulamayı facebook tan biliyoruz saolun
Dec. 12, 2008, 7:12 a.m. - ddm57: 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
Jan. 28, 2009, 8:59 p.m. - ahmr: comentt commenr
Feb. 17, 2009, 3:18 a.m. - Mudasser: what would be the case if i also want to get option ids (values) without displaying in the drop down.
March 10, 2009, 7:44 a.m. - smashit: nice autocomplete script !!
May 6, 2009, 5:17 p.m. - Totally Random Internet Sufing Wierdo: monkey monkey monkey
Aug. 26, 2009, 6:44 p.m. - Clayton Corey: CHWu - it's just an example
Sept. 13, 2009, 8:19 p.m. - dictator: cool I need it
Sept. 16, 2009, 6:37 a.m. - multicoder: really good one :)
Oct. 4, 2009, 8:32 a.m. - iwanttobelieve: This is useful for a dictionary system I am working on. Thanks!
Nov. 2, 2009, 6:53 a.m. - Harippa: Tanx Lot of Lot
Nov. 24, 2009, 6:15 p.m. - Lex Castillo: i can't make it run with database =S
Jan. 25, 2010, 7:41 p.m. - huy.zhu: 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
March 11, 2010, 2:55 a.m. - John: If the webmaster set's taiwan as a independent country, well, have you think about what most of the chinese all over the world will think about?
March 13, 2010, 7:04 p.m. - theanh: Please show me where i can down load this source code?
April 27, 2010, 7:38 a.m. - Arno: The script does not include 'Autocompleter.Request.js', but does depend on this file. In other words: the above example will not work when copied until you add the mentioned file.
May 10, 2010, 10:08 a.m. - Adler: Very Good !
May 13, 2010, 12:56 a.m. - Mutahir Shah: Sir would u mind sending the file "autocomplete.php" that we study to learn it formate.
June 17, 2010, 6:42 a.m. - Cesar: excelent example but, if i wanna take the data from a database, u know if i want the data to be taken from a db how would it be?
July 3, 2010, 2:24 a.m. - yinhe: thank you for your example
Nov. 11, 2010, 4:47 a.m. - Leonardo Lima - Desenvolvimento Web Rio Preto: This script isn´t working into Chrome... When choose one option, the value in the result input is undefined
Feb. 8, 2011, 7:15 a.m. - testlog: value of textbox becomes "Undefined" if you click on a suggested word
Feb. 13, 2011, 9:51 a.m. - Geobytes: Works in firefox, but not IE or Chrome, however, this workaround by sofasurfer appears to fix it: Change lines 349 and 350 of Autocompleter.js from 349: 'mouseover': this.choiceOver.bind(this, [el]), 350: 'click': this.choiceSelect.bind(this, [el]) to 349: 'mouseover': this.choiceOver.bind(this, el), 350: 'click': this.choiceSelect.bind(this, el) or see the original post here: http://digitarald.de/forums/topic.php?id=2040
May 9, 2011, 4:40 a.m. - MichK: Motools autocompleter which works also in Webkit browsers you can find also on Google Code website: http://code.google.com/p/mootools-autocompleter/ Hope it will help someone :)
Sept. 29, 2011, 11:33 a.m. - Abdou: Hi When I select one item in my list, the displayed value is : undefined