Other versions:
AutoCompleter (v1.1)
This AutoCompleter script for MooTools provides the functionality for text suggestion and completion.
It features different data-sources (local, JSON or XML), a variety of user interactions,
custom formatting, multiple selection, animations and much more.
Showcase “Local Tag”
Autocompleted tags in input fields and textareas, controlled by keyboard and mouse.
The Action Happens Here
JavaScript & MooTools
document.addEvent('domready', function() { // Test source, list of tags from http://del.icio.us/tag/ var tokens = ['.net', '2008', '3d', 'advertising', 'ajax', 'appengine', 'apple', 'architecture', 'art', 'article', 'articles', 'audio', 'blog', 'blogging', 'blogs', 'books', 'business', 'china', 'community', 'computer', 'cooking', 'cool', 'css', 'culture', 'design', 'development', 'diy', 'download', 'education', 'english', 'environment', 'fashion', 'fic', 'film', 'finance', 'firefox', 'flash', 'flex', 'flickr', 'fonts', 'food', 'free', 'freeware', 'fun', 'funny', 'gallery', 'games', 'generator', 'git', 'google', 'government', 'graphics', 'green', 'hardware', 'health', 'history', 'home', 'howto', 'humor', 'illustration', 'imported', 'inspiration', 'interactive', 'internet', 'java', 'javascript', 'job', 'jobs', 'language', 'law', 'library', 'linux', 'mac', 'maps', 'marketing', 'math', 'media', 'microsoft', 'mobile', 'money', 'mp3', 'music', 'news', 'online', 'opensource', 'osx', 'photo', 'photography', 'photos', 'photoshop', 'php', 'politics', 'portfolio', 'productivity', 'programming', 'python', 'rails', 'recipe', 'recipes', 'reference', 'research', 'resources', 'ruby', 'school', 'science', 'search', 'security', 'seo', 'sga', 'shopping', 'slash', 'social', 'software', 'statistics', 'teaching', 'tech', 'technology', 'tips', 'todo', 'tools', 'toread', 'travel', 'tutorial', 'tutorials', 'tv', 'twitter', 'typography', 'ubuntu', 'video', 'visualization', 'web', 'web2.0', 'webdesign', 'webdev', 'wiki', 'windows', 'wordpress', 'work', 'writing', 'youtube']; // Our instance for the element with id "demo-local" new Autocompleter.Local('demo-local', tokens, { 'minLength': 1, // We need at least 1 character 'selectMode': 'type-ahead', // Instant completion 'multiple': true // Tag support, by default comma separated }); // Our instance for the element with id "demo-local-2", the textarea new Autocompleter.Local('demo-local-2', tokens, { 'minLength': 1, // We need at least 1 character 'selectMode': 'type-ahead', // Instant completion 'multiple': true // Tag support, by default comma separated }); });
XHTML Markup
<form action="http://del.icio.us/search/" method="get" id="form-demo"> <fieldset> <legend><a href="http://del.icio.us/">del.icio.us</a> / search <small>(Suggestions from <a href="http://del.icio.us/tag/">top tags</a>)</small></legend> <label> <input type="text" name="p" id="demo-local" /> </label> <label> <textarea name="p_long" id="demo-local-2" style="height: 100px;"></textarea> </label> </fieldset> </form>
CSS Stylesheet
#demo-local { width: 350px; border: 1px solid #444; }
This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.
Keywords:
261 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
I've got the same error with Opera 9.50 (Windows and Linux). I've changed code but problem still is appearing. Could you help me?
-
At least I can try. Can you put your example somewhere on the web and post a link to it?
-
hi there
I want the working example of this auto completer please can you let me know via email once you have it up and running..i see that you said you will be loading it by next week.....dude_gallary@Hotmail.com
i looked for the working example with all the relevant files but cant find it on your website to download
pls help as i would like to implement this on my personal website -
There's a bug in the Autocompleter.Ajax.Json.queryResponse() method (around line 422).
Autocompleter.Base.update() expects the tokens variable to be an array. However, the Json queryResponse method returns a response object. This causes the if statement in update() (around line 269) to break when it checks for length and later when it runs the .each block (around line 273).
The solution is to remove the tokens.length section from the if statement (around line 269) and have the Json queryResponse method return a Hash of the response object.
Line 269 should look like:
if (!tokens) {
Line 422 should look like:
this.update($H(response));
Ideally, there would be a .length method for Hash, but MooTools 1.2 (trunk) doesn't currently have one.
Hope that helps. -
Thx for the report and your help. Good catch on that domready error :) . You can not add a length property to Hash, but a method to get the length. I'll tweak the token check.
-
im trying to include flag icons in my autocomplete results
(i translitirate my tokens to latin names to get the images)
The code is bad but ain't work in Google Chrome :( it works in FF and IE at the same time! Please help me! How can i include image elements in the result list?
document.addEvent('domready', function() {
// функция транслитерации
function translit(s)
{
var t="аaбbвvгgдdеeёjoжzhзzиiйjjкkлlмmнnоoпpрrсsтtуuфfхkhцcчchшshщshhъ''ыyь'эehюjuяjaАAБBВVГGДDЕEЁJoЖZhЗZИIЙJjКKЛLМMНNОOПPРRСSТTУUФFХKhЦCЧChШShЩShhЪ''ЫYЬ'ЭEhЮJuЯJa";
t=t.replace(/([а-яёЁ])([a-z']+)/gi,'.replace(/$1/g,"$2")');
return eval("s"+t);
}
var tokens = ['Афганистан', 'Aвстралия', 'Албания', 'Алжир', 'Аргентина', 'Ангола', 'Аргентина', 'Армения', 'Аруба', 'Aзербайджан', 'Aвстрия', 'Багамы', 'Бахрейн', 'Бангладеш', 'Барбадос', 'Беларусь', 'Бельгия', 'Белиз', 'Бенин', 'Бермудские острова', 'Бутан', 'Боливия', 'Босния и Герцеговина', 'Ботсвана', 'Буве, остров', 'Бразилия', 'Бруней Дарассалам', 'Болгария', 'Буркина-Фасо', 'Бурунди', 'Бутан', 'Камерун', 'Канада', 'Каймановы о-ва (Великобритания)', 'Центрально-африканская Республика', 'Чад', 'Чили', 'Китай', 'Остров Рождества', 'Кокосовые (Килинг) острова', 'Колумбия', 'Коморские о-ва', 'Конго', 'Демократическая Республика Конго', 'Острова Кука (Новая Зеландия)', 'Коста-Рика', 'Кот-Дивуар', 'Хорватия', 'Куба', 'Кипр', 'Чехия', 'Дания', 'Джибути', 'Доминиканская республика', 'Эквадор', 'Египет', 'Экваториальная Гвинея', 'Эритрия', 'Эстония', 'Эфиопия', 'Фолклендские (Мальвинские) острова', 'Фарерские острова', 'Фиджи', 'Финляндия', 'Франция', 'Французская Гвиана', 'Французская Полинезия', 'Габон', 'Гамбия', 'Грузия', 'Германия', 'Гана', 'Гибралтар', 'Греция', 'Гренландия', 'Гренада', 'Гваделупа', 'Гуам', 'Гватемала', 'Гвинея', 'Гвинея-Бисау', 'Гайна', 'Гаити', 'Гондурас', 'Гон-Конг', 'Венгрия', 'Исландия', 'Индия', 'Индонезия', 'Иран', 'Ирак', 'Ирландия', 'Израиль', 'Италия', 'Ямайка', 'Япония', 'Иордания', 'Казахстан', 'Кения', 'Корея, Южная', 'Корея, Северная', 'Кувейт', 'Киргизстан', 'Лаос', 'Латвия', 'Лесото', 'Либерия', 'Лихтенштейн', 'Литва', 'Люксембург', 'Макао', 'Македония', 'Мадагаскар', 'Малави', 'Малайзия', 'Мальдивы', 'Мали', 'Мальта', 'Мавритания', 'Мексика', 'Микронезия', 'Молдова', 'Монако', 'Монголия', 'Монтсеррат', 'Марокко', 'Мозамбик', 'Мьянма', 'Намибия', 'Непал', 'Нидерланды', 'Новая Каледония', 'Новая Зеландия', 'Никарагуа', 'Нигер', 'Нигерия', 'Норвегия', 'Оман', 'Пакистан', 'Панама', 'Папуа Новой Гвинеи', 'Парагвай', 'Перу', 'Филлипины', 'Польша', 'Португалия', 'Пуэрто-Рико', 'остров Реюньон (Франция)', 'Румыния', 'Российская Федерация', 'Руанда', 'остров Святой Елены', 'Самоа', 'Сан-Марино', 'Саудовская Аравия', 'Сенегал', 'Сьерра-Леоне', 'Сингапур', 'Словакия', 'Словения', 'Соломоновы острова', 'Сомали', 'Южная Африка', 'Испания', 'Шри Ланка', 'Судан', 'Свазиленд', 'Швеция', 'Швейцария', 'Сирия', 'Тайвань', 'Таджикистан', 'Танзания', 'Таиланд', 'Того', 'Токелау', 'Тонга', 'Тринидад и Тобаго', 'Тунис', 'Турция', 'Туркменистан', 'Тувалу', 'Уганда', 'Украина', 'ОАЭ', 'Англия', 'Великобритания', 'США', 'Соединенные Штаты Америки', 'Уругвай', 'Узбекистан', 'Ванауту', 'Венесуэла', 'Вьетнам', 'Йемен', 'Замбия', 'Зимбабве'];
new Autocompleter.Local('demo-local4', tokens, {
'minLength': 1,
'selectMode': 'pick',
'overflow': true,
'injectChoice': function(token){
var choice = new Element('li');
new Element('img', {
'src': 'images/' + translit(token) + '.gif'
}).inject(choice);
new Element('img', {
'src': 'images/' + 'spacer.png'
}).inject(choice);
new Element('span', {'html': this.markQueryValue(token)}).inject(choice);
choice.inputValue = token;
this.addChoiceEvents(choice).inject(this.choices);
}
});
}); -
Thank you very much for this.... You just made my day.. Was struggling to get it to work, but it looks so nice and cool now... Thank you again :)
Zoran from Macedonia -
Excellent work here!
Wow, I am liking this functionality big time.
Only issue, and others in this thread are requesting this feature, is how to integrate with a select list instead of a text input field?
I'm going to rig my app to populate a select list on user selection of the typed ahead text, but would be much cleaner to have everything happen in one field (and set the select list value to the ID of the found search term and the display as the search term) -
Hi many thanx for your explanation...and i would like to ask if you could help me with something...How can i use this script for multiple input fields, each one of them will be using different tables of my database, like product name, brand etc...please help me guys...
-
super work . thanks for sharing
-
super work . thanks for sharing
-
Hi,
Very good work, thanks for sharing.
I think your example is not totally correct. The 'url' param is not supposed to be in the options but the second argument of your constructor... -
Hi,
have made the same experience today. The example still isn't fixed:-(
Anyway: You've done a great job, thank you! -
addendum, the Clientcide version definitely fixes the IE Scrollbar issue, but it's not because they use IframeShim for OverlayFix (although it might be...)
Now all I need to do is make Observer skip over list items that I've applied the choiceHead class to and I'm done! -
Ah, Clientcide skip the IE issue by changing the interaction - the choices only blur if you *click* outside them.
-
I'm building an Apple-style interface with this, with Featured results mixed with organic term suggestions. It works a treat except that it miscalculates the height of the block, as the feature results have and extra line of description. I can't work out where to fix it as the height seems to be based on the bottom of the container once built.
My boss just asked me if I could make the "best bets" and "suggestions" sit side by side but when I did it with floated lists and a customChoices, the placement of the dropdown screwed up.
BTW, I too have noticed the IE6/7 problem with the scrollbar (I turned overflow to false to "solve" it), I was considering extending the duration or playing with the Z-index to fix but haven't had much luck yet.
I'll post my code when it's bedded down and working. -
How I can display the autocomplete when the user is focused on the input element.
Ex: if user focus the mouse over the input element, i want to display autocomlpte with all options listed. (for local autocomlpete)
Are here any method for this?
Thanks. -
it took for me 5 hours to figure that out :S
lol = new Autocompleter.Local('category', maincategories, {
'minLength': 0,
'overflow': true,
'filterSubset': true,
'zindex': 50000
});
the important is set minLength to 0!
and your textfield:
<input id="category" name="category" onfocus="javascript:if(this.value=='') {lol.observer.onFired();}" type="text"> -
What was handy for me was adding a supply function for additional get parameters, so we could make easily make the choices depend on radio buttons etc.
In query function of Autocompleter.Request we changed the end to
var d = new Hash(data);
if (this.options.supplyFunc != null) d.combine(this.options.supplyFunc());
this.request.send({'data': d});
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
message: RegExp.prototype.test was called with the wrong number of arguments
stacktrace: ... Line 307 of linked script http://digitarald.de/project/autocompleter/1-1/source/Autocompleter.js
return (tokens || this.tokens).filter(regex.test, regex);
... and so on...
So I've changed line 307 from:
- return (tokens || this.tokens).filter(regex.test, regex);
to the content adapted from 1.0 version:
+ return (tokens || this.tokens).filter(function(token){return regex.test(tokens || this.tokens);});
and all started to work. Thank you digitarald!