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.

MooTools Autocomplete demo

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



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

March 16, 2012, 5:23 a.m. - Ansu mary Babu

hiiiii, plz send me the example for autocomplete textbox for selecting places using jsp.....my emailid is ansumarybabu@ymail.com