DISQUS

krzyko · 1 year ago

For me (Autocompleter 1.1.1 with MooTools 1.2) Opera 9.50 was bailing out with an error :

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

skarlcf · 1 year ago

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?

krzyko · 1 year ago

At least I can try. Can you put your example somewhere on the web and post a link to it?

JR · 1 year ago

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

Benjamin · 1 year ago

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.

digitarald · 1 year ago

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.

gatavas · 1 year ago

do you have a working example for Autocompleter.Ajax.Xhtml ? I havo no luck with this.. I can not pick an item from selected list with mouse

digitarald · 1 year ago

I'll add the showcases next week. I have the code already here but need to convert it into a showcase. And I found the [problem](#changelog) why you can't click the items, thx for reporting.

l0fty · 1 year ago

I get
missing : after property id
on line
new Autocompleter.Ajax.Json('fe-searchuser', '/test/autocomp.php', {\n

digitarald · 1 year ago

How does your options argument look like, the part between* { ... }*. Make sure to always put , between the key: value pairs, also commas at the end of an object like {key: 'value', key2: 'value',} work in FF but fail in IE and Opera.

jajcarz · 1 year ago

My code looks like this:

<html>
<head>
link rel="stylesheet" type="text/css" href="Autocompleter.css" />
<style type="text/css">
#demo-local
{
width: 350px;
border: 1px solid #444;
}
</style>

<script type="text/javascript" src="mootools-trunk-1544.js"></script>
<script type="text/javascript" src="Observer.js"></script>
<script type="text/javascript" src="Autocompleter.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', { new Autocompleter.Ajax.Json('fe-searchuser', '/query_user.php', {'postVar': 'search'}); });
/* ]]> */
</script>

</head>
<body>
<form action="" method="post" id="form-demo">
<input type="text" name="searchuser" id="fe-searchuser"/>
</form>
</body>
</html>

And what is the problem here ?

digitarald · 1 year ago

Please paste big code in an external pastie and post the link or use markdown (this means indent code blocks with at least 1 tab)

jajcarz · 1 year ago

Here is the address http://paste.mootools.net/d6590be7d

jajcarz · 1 year ago

I've got the same problem "missing : after property id ...."

TiBe · 1 year ago

It just doesnt work with mootools beta 1.2b

digitarald · 1 year ago

You are right, documentation mentions 1.2 trunk, not beta 1 or 2. But a stable release is close.

Michael · 1 year ago

Does parseChoices work with this version? I can't seem to find any references to it on the source except for a comment?? Is it removed in this version?

Thanks!

digitarald · 1 year ago

I renamed it to injectChoice, so all classes use the same option to parse and inject the choices. Works the same way, take a look at the *Autocompleter.Ajax.Xhtml* class.

Michael · 1 year ago

Thanks. I was able to figure that out by looking at the code.
I am having one difficulty using this new version. I have a form that autocompletes a city. But above the city you are able to choose which country you are in. As the autocomplete url for the city changes depending on the selected country I change the city ajax url when the country changes. Using the old autocompleter I did this by doing "cityAjax.ajax.url = 'new url'. How can I do this with mootools 1.2? "cityAjax.request.url = 'new url' doesn't seem to work.

Thanks for any help!

digitarald · 1 year ago

Hi Michael, url is now in the request options: cityAjax.request.options.url = "new". You can also use the option postData to send additional data that changes the city-source.

Leon · 1 year ago

Here is a .net 3.5 version of the backend.. just create a .ashx file and paste this, then add whatever you want to the results List

<%@ WebHandler Language="C#" Class="AutoComplete" %>
using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Runtime.Serialization.Json;

public class AutoComplete : IHttpHandler
{
public void ProcessRequest (HttpContext context)
{
var result = new List<string>();

result.Add("Cow");
result.Add("Chicken");

context.Response.ContentType = "application/json";
context.Response.Charset = context.Response.ContentEncoding.WebName;
using (var writer = JsonReaderWriterFactory.CreateJsonWriter(context.Response.OutputStream, context.Response.ContentEncoding))
{
var serializer = new DataContractJsonSerializer(typeof(string[]));
serializer.WriteObject(writer, result);
}
}

public bool IsReusable { get { return false; } }
}

Christopher · 1 year ago

I just can't seem to figure this error out: I keep getting 'str.replace is not a function' on line 321. I've CnP your code, but still can't get it to run!

ricardok1 · 1 year ago

Hi there,

I'm getting an error: $empty is not defined (line 29) in both IE and FF.

I just copy the your example “Local Completion”

Txs
Ricardo

digitarald · 1 year ago

And what MooTools version do u use?

ricardok1 · 1 year ago

I see that only Beta have the function $empty and I have tried with it.

The error is now in the mootools beta: Element.implement -> property = property.camelCase(); is not a function (in IE -> this object doesn't support this property or object)

TiBe · 1 year ago

Ok, im triying to make it work now with mootools trunk revision 1545 (the link you post), and its still not working:
<pre>


window.addEvent('domready', {
    new Autocompleter.Ajax.Json('fe-searchuser', '/query_user.php', {
        'postVar': 'search'
    });
});

</pre>

I get the next error: missing :

*after property id*

Benjamin · 1 year ago

window.addEvent('domread', {
should be
window.addEvent('domread', function (event) {

Colin · 1 year ago

Is there a way to set a hidden field once the user has made a selection? For example: I'm using an auto complete field to search through a contact's first and last name. I'd like to have the JSON send back the IDs of the contacts as well as their full names, so when they actually submit the form I can just pick out the ID (rather than having to split the name up and search by first and last name again).

digitarald · 1 year ago

There are several events, onSelection is fired when the the field is updated from a selection and onSelect is fired when the user highlights a suggestion.

Joe Nathan · 1 year ago

I understand you are using MooTools 1.2, Is there any you can support MooTools 1.1 version. There are lot of new features in this version of autocomplete which are not there prior version. It will be a year before my company will adopt MooTools 1.2.

digitarald · 1 year ago

Follow the white rabbit ... no ... the 1.0: http://digitarald.de/project/autocompleter/1-0/

carf · 1 year ago

this is weird, i'd love to comment on 1.0 but seems like comments are shared for both versions.
i am feelin' dumb, but hey i am starting to feel dumber because example tells me to use
[code]
onRequest: indicatorShow,
onRequest: indicatorHide
[/code]
while there is no sign of [b]indicatorShow[/b] or [b]indicatorHide[/b] in the codes. I might feel ok if i could see any showcases since you are telling "check the source of showcases" in almost all paragraphs but i cant see any.
I feel like i'm missing something huge but dont know what

carf · 1 year ago

i cant even use markup :)

digitarald · 1 year ago

:D I fixed the example. 1.2 supports automatic hide and show for an indicator, I mixed that code up.

carf · 1 year ago

ok makes more sense now :)
but still constructer is a little different, in Autocompleter.Ajax.Json
Autocompleter.Ajax.Json(searchInput, '/search', {optionsName: optionValue});
should be the correct syntax according to your code

gmusa · 1 year ago

I need some help with the script
the problem is the separator string .
when I income "tag1, tag2, tag3", the script works perfectly
but when income a space between the first tag and the comma, the script is not working properly
tag1 , tag2 , tag3
What should I do to replace " ," with ","? or, what solution can be applied?

(apologize for my poor English)

digitarald · 1 year ago

Can u describe the problem? The split regexp should take of these spaces and complete correctly. What happens?

gmusa · 1 year ago

it´'s solved . there is not any probleme , i was doing it bad. tnks anyway.

pion · 1 year ago

It could be really good autocompleter but it DOESN'T work on Opera 9.25. Could you fix that problem?

digitarald · 1 year ago

I'll test, it should work, but your problem description isn't really exhaustive.

rexxars · 1 year ago

Hi.

I'm looking for a way to show a "searching" icon in the input field while the request is being done.
First, I tried using onRequest, but this doesn't fire early enough for my taste (user may not realize why nothing is happening if he has to wait for the progress icon appears).
Then I tried adding an event to the input fields keypress event, but this fires up the progress icon even if you press the arrow keys/home/end/backspace etc.
onChange is obviously useless as that fires when the field is left out of focus...

Any ideas? Thanks in advance! :-)

digitarald · 1 year ago

onRequest fires when the request starts, also the indicator is shown then. Showing an indicator earlier would not make sense, since it would not indicate that a real request is going one. You can make the delay shorter for the Observer, so you'll get results faster

Daniel · 1 year ago

Best autocompleter I have seen.
One Problem:
I am using Autocompleter.Local
Is it possible to have an array as token? For example search for a word, but as post-data take an id?

digitarald · 1 year ago

Yes, you can use onSelection and onSelect to do that. I'll add an example ... so much to do :D

Pierr Bonneau · 1 year ago

updateChoices: function(choices) {
this.choices.empty();
this.selected = null;
if (!choices ){
return;
}
if (this.options.maxChoices < choices.length){
choices.length = this.options.maxChoices;
}
for(var i in choices){
var choice = choices[i];
if ((choice!="")&&($type(choice)!='function')){
var el = new Element('li').setHTML(this.markQueryValue(choice));
el.inputValue = choice;
el.id = i;
this.addChoiceEvents(el).injectInside(this.choices);
}
}
this.showChoices();
},

for the 1.0 version, i propose this correction.
You have to delete the .lenght test on line 269

On my mootools 1.11 this correction works nice. (I search how to use ID param)

This is not final code, the id must not be in id param to be XHTML complient.

Pierre Bonneau · 1 year ago

I'm in mootools 1.11, so i use the 1.0 version of autocompleter.

I have implement new feature to the class :
- if there are more than limit return, the class add a LI with ... to explain this.
- if the param is not an array, but an object, the autocompleter works nice
- the autocompleter give to the user the id selected in the method onSelect.

My new file is on : http://samourais.info/perso/autocompleter/

Don't hesitate to use it or to inspire of it. My companie prefer ta have official release so when we make change on open source file, we are encourage to share our update.

digitarald · 1 year ago

Ok, I'll add this fix in the next version. Thx for sharing.

kch · 1 year ago

I found kind of an odd bug that I'm wondering how to fix. You should be able to reproduce this using the "local completion" showcase.

If you type 'a' (or any letter with enough countries that there would be an overflow), if you move your mouse pointer anywhere into the area with the drop down then try to use the down or up arrow key on your keyboard to scroll through the list, instead of scrolling down (or up) through the list to the end, you are jumped back up in the list. If you keep on using your arrow key, you'll eventually get all the way to the end of the list, but you'll be jumped up quite a few times before you do.

Any thoughts on how to fix this?

digitarald · 1 year ago

Can't reproduce it in Firefox, what Browser did u use?

yzhu · 1 year ago

I have same problem like "kch" described here. you have to leave the mouse pointer inside selection area, if you leave mouse pointer outside, everything work just fine.
I tried on IE6 as well as Firefox 3rc1, Firefox 2.0.0.11.
Thanks,

BobJpg · 1 year ago

Hello, this script is marvelous.

Only got a little problem with the option: overflow:true

In fact, passing over the scroll bar means going out off the autocompleter's div so it closes when passing on a link under this scroll bar...

Someone ever experience the same problem?

Thanks,
BobJpg

Someone ever

digitarald · 1 year ago

Do you have a test case for that? Hovering link under the overlay closes it?

paul · 1 year ago

there is a problem with onSelect event is executed each time i roll over an option. this problem doesnt occur in version 1.0 with mootools 1.1

DesiTech · 1 year ago

Is there a way to have second word auto complete as well. Currently the suggested words are only showed for 1st word. Is there a way where it also shows for 2nd word.

digitarald · 1 year ago

yes, use multiple. Default splits words by comma, change that to spaces or whatever u prefer.

gaston · 1 year ago

i am using some of yours scripts in my site . they need the mootools 1.2 version.
but some of my scrips are using the 1.1 version
it's possible to make both work fine ?

the drag and drop don´t work fine for me in the 1.2 version.
thanks a lot for your time !-

Pierre Bonneau · 1 year ago

the version 1.0 is for you ;p (on the right top corner...)

scramatte · 1 year ago

Hi,

I've used your autocompleter to search intor our LDAP directory.
What happens is that I would like to display in suggest list "Firstname, lastname, address,...) and on item click just fill the input textfield with lastname. Something like "option key / value" ...

digitarald · 1 year ago

I need to add an example ... I think u need to use the event onSelection, which gets the current selected value. Of course thats not the only change ;)

gaston · 1 year ago

when do you think the example for scramatte will be online ? i am needing the same example. thks!

gaston · 1 year ago

i do some changes to the code for use a autocompleter like facebook.

the javascript
http://paste.mootools.net/f576983de

the php code
http://paste.mootools.net/f548a50b3 ( for the return json )

gaston · 1 year ago

the code is for v1.0

johnpp · 1 year ago

Sorry for silly question, but how can i add one more post value. by default its "search=someword" and i need to add city value to select from database only in this city.

digitarald · 1 year ago

Option postData is what u need I think.

digitalblade · 1 year ago

hi, really cool apps.. but how can i add a "progress" icon like page load in firefox (i mean a simple animated gif during search phase...)? i've see that in the code i can use some option like "indicator" but i can't understand how really must be used! can i've an example ? i've try to pass a div as option but seem not work...

TIA

digitarald · 1 year ago

indicator is any element, that Autocompleter shows and hides during request ... really simple. Take care that its initially hidden.

digitalblade · 1 year ago

thank you for your reply !
but if i use the indicator option i obtain this error from ff:

indicator.show has no properties
http://localhost/ddtrequests/libs/js/autocomple...
Line 382

i use
autcomplete 1.1
mootools trunk 1555
ff2/ie7
winxp

this is my code:

....
<div id="indicatorimg" name="indicatorimg" style="display:none;">
<img style="display:none;" src="images/progress_bar.gif" />
</div>
....
new Autocompleter.Ajax.Json('search_field', './index.php?operation=search', {
'indicator': indicatorimg,
'width': 'auto',
'minLength' : 3,
'maxChoices': 20,
'overflow' : true,
'postVar': 'search_field'
})

thank you for your work and for your help!

digitarald · 1 year ago

Ups ... next minor update is close :)

Rodrigo Menegazzo · 1 year ago

Hey there. Testing mootools 1555 trunk + autocomplete 1.1.1 and got the same issue.
Any fix for that?

Thanks a lot

digitalblade · 1 year ago

i've found a way to show a progress bar (not with indicator that seem not work.. but with onRequest/onComplete) now i want show total row returned on search box, how can i found the number returned from the search directly on client side ?

TIA

P.s. but exist some kind of manual, forum, or other example where i can find detailed information ? is really hard to make my modification or addition if i must study the code without documentation... the code is well written but is hard to read every time i need some function.

Michel · 1 year ago

I use the version 1.0 (with mootools 1.11) and in this case, i can return **<li ...>Data 1<span>Extra infos</span></li>** etc... This entry selected, the input is feed with **"Data 1"**.
I try to use the version 1.1.1 (with mootools 1.2 beta 1555) and for the same *<li ...>*, the input is feed with **"Data 1<span>Extra infos</span>** !

Is there any option to correct that ?

digitarald · 1 year ago

So I should read in the text instead of the html? I check that. Next minor update is close.

gaston · 1 year ago

how i destroy the autocompleter to create a new one ?
i need to pass a value extra in the new auto completer

var autocompleter = new Autocompleter.Ajax.Json( 'ItemName', 'ajax_autoCompleter.php' , {
'postData': { 'field' : 'ItemName' , 'type' : $('selected_type').value }
});

this code works but generate varius autocompleters

i need to redefine postData when some items have a change on the page.

Jean-Nicolas · 1 year ago

I have been trying to do what you are trying to do for 3 days now... Since I don't have more time I hack this in the Autocompleter code:

query: function(){
var data = $unlink(this.options.postData);
data[this.options.postVar] = JSON.encode({searchval: this.queryValue, section: getCheckedValue(document.forms['form'].elements['sectionsearch'])});
this.fireEvent('onRequest', [this.element, this.request, data, this.queryValue]);
this.request.send({'data': data});
},

This is the line I change:

data[this.options.postVar] = JSON.encode({searchval: this.queryValue, section: getCheckedValue(document.forms['form'].elements['sectionsearch'])});

It use to be :

data[this.options.postVar] = this.queryValue;

This way it sends a JSON string to your server and from there you can manupulate it.

This what I added to the PHP:

$arrayofpost=json_decode($_POST['searchstring'],true);
$search=$arrayofpost['searchval'];
$section=$search['section'];

I hope it helps... I know its dirty but if your in a hurry like me I should work find.

digitarald · 1 year ago

Very simple, override options with something like `myAuto.setOptions({postData: newValues})`

Manuel · 1 year ago

Thanks, you're great!!!

Andy · 1 year ago

Hi, Has anyone got this working with Csharp in ASP.NET? Would be great if someone could point me in the right direction.

digitarald · 1 year ago

Just return JSON, can't be that hard, even in .NET.

gjotto · 1 year ago

Hi, I made a street searcher web2.0 application for my student organization located in Romania, Kolozsvar. Thanks for the AutoCompleter class. It is very useful. Our street searcher helps students, especially those in the 1st year to find a street by hungarian or romanian name. The street signs are just in romanian language, and the students sometime know just the hungarian name of the street. Have a nice day. Here's the link http://kmdsz.ro/utcanevek. I think it will be moved to http://utcanevek.kmdsz.ro

digitarald · 1 year ago

Thanks for the kodus and the linkback, nice and clean implementation!

Jacob Kennedy · 1 year ago

I'm having a bit of an issue with commas in my values. I want to allow commas but the formatting of tags is adding a space. When 'multiple' is set to false any commas in the values should be ignored. Is there a quick way to override this?

Robert · 1 year ago

Hello,
Thanks for great code.
I'am trying to replicate typical combobox behavior - ie return pairs of {name, id}, show names and get id from the selection. But I don't know where to start.
Should I create 'injectChoice' and 'onSelect' or do I have to change Autocompleter code?

thank You again for Your work,
Robert

Jesse James · 1 year ago

Did you ever get an answer to this?

Robert · 1 year ago

No :)

I did it with SqueezeBox instead...
But i'am stil curious if it is possible and how. ;)

anaweb · 1 year ago

hi,

i need to redefine postdata when some items have a change on the page.

ex:

<input type="text" name="q" id="q" />
<select name="pq" id="pq">
<option value="items1">items1</option>
<option value="items2">items2</option>
</select>

window.addEvent('domready', function() {
new Autocompleter.Ajax.Xhtml($('q'), 'index.php?id=32', {
postData: {'html' : 1, 'pq' : $('pq').value} ,
postVar: 'search',
parseChoices: function(el) {
var value = el.getFirst().innerHTML;
el.inputValue = value;
this.addChoiceEvents(el).getFirst().setHTML(this.markQueryValue(value));
}
});

this code works but generate varius autocompleters

thank for help.

TomWA007 · 1 year ago

Do you have plans to upgrade to mootools 1.2?

swami · 1 year ago

Hello... new to Mootools and have a question about the autocompleter ....

Is there an option and/or event that I can use to automatically submit the selected value with both the mouse click and enter key? I know that autoSubmit will submit correctly with the <enter> key using the keyboard error buttons, so that will work. But, I have been trying different events, specifically the onSelection event which is close, but not exactly right for my needs. The onSelection event works fine with the mouse click, but is not very friendly with the keyboard arrow buttons. It appears that it cancels the autoSubmit option.

I'm looking for a solution to automatically submit using both:
1) the keyboard arrows and submit, AND
2) the mouse with the <enter> key

Oscar López · 1 year ago

Found a solution? I'm stuck with the same problem... i'm also new with Mootools, first time I use it.

The autocompleter is just awesome :), thanks.

swami · 1 year ago

Nope. I had to abandon mootools b/c it doesn't appear to play nice with the Microsoft Ajax Toolkit.

Good luck with it.

michaelr · 1 year ago

W00t! Thanks heaps dude, this script works a dream! I'm using it with MooTools 1.2 no problem.

dway · 1 year ago

I think I've found a bug :
When the choices are shown, the click on a choice does'nt add the default separator ('multiple': true) at the end of line. To speak true, It adds it and remove it just after : I can see the comma, but it desappears fastly.
I'm using mootools 1.2 / firefox 2.0.0.14.
I'm not skilled with mootools, I can just encourage you to test ^^

dway · 1 year ago

#Auto-responding#
The problem comes from the autoTrim.
If it's set to false, it works with the mouse.
How can I change the line 213 for preserving separator (the code looks like still doing this, but it does'nt work the way it should.)
Any help ?
thx for reading ^^

JohnM · 1 year ago

Hi, I'm having a problem with the autocompleter. The auto completer works fine until you use the keyboard arrow keys to navigate down the list. The autocompleter seems to choose the first option on the list and then stop, hiding all other options. Please help :-s

Example at:
http://www.icongeneration.com/dev/

dway · 1 year ago

Tested with Opera 9.50, for tag completion, and there is a bug : when choosing a tag ine the list with th down key and press Enter, it validates the form but it should complete the tag with a comma. And when you click on a choice, it does'nt do anything.
Thanks for your work again !

JRA · 1 year ago

It doesn't work with textareas on IE. The function getCaretPosition doesn't return the correct position... Has anyone found a solution?

marka · 1 year ago

Could anybody please help. I cannot get this working at all. I am using Joomla 1.5 which uses Mootools 1.11.

In the <head> I have included the following :-
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<link rel="stylesheet" href="templates/mymemories/css/Autocompleter.css" type="text/css" />
<script type="text/javascript" src="templates/mymemories/javascript/Observer.js"></script>
<script type="text/javascript" src="templates/mymemories/javascript/Autocompleter.js"></script>

This is my function to get the data to return :-

function getAjaxData()
{
$result = array();
$search = $_POST['q'];
$db =& $this->getDBO();
$query = "SELECT * FROM " . $db->nameQuote('#__jootags_tags')
. " WHERE " . $db->nameQuote('title') . " LIKE '$search%'";
$db->setQuery($query);
$result = $db->loadResultArray();

// return the ajax data
return $result;
}

called from here :-

function display()
{
$ajaxData = $this->get('AjaxData');
$doc =& JFactory::getDocument();
$doc->setMimeEncoding('application/json');
echo json_encode($ajaxData);
}

And this is in my form code :-

<script language="javascript" type="text/javascript">

var searchInput = $('search-field');

// A simple spinner div, display-toggled during request
var indicator = new Element('div', {
'class': 'autocompleter-loading',
'styles': {'display': 'none'}
}).injectAfter(searchInput); // appended after the input

var completer = new Autocompleter.Ajax.Json(searchInput, {
'url': 'index.php?option=com_situploads&view=upload&format=raw',
'postVar': 'q',
'onRequest': function(el) {
indicator.setStyle('display', '');
},
'onComplete': function(el) {
indicator.setStyle('display', 'none');
}
});
</script>

<input type="text" id="search-field"/>

marka · 1 year ago

Sorry, I will lay this out better.

In the <head> I have included the following :-
<script type=”text/javascript” src=”/media/system/js/mootools.js”></script>
<link rel=”stylesheet” href=”templates/mymemories/css/Autocompleter.css” type=”text/css” />
<script type=”text/javascript” src=”templates/mymemories/javascript/Observer.js”></script>
<script type=”text/javascript” src=”templates/mymemories/javascript/Autocompleter.js”></script>

This is my function to get the data to return :-

function getAjaxData() {
$result = array();
$search = $POST[‘q’];
$db =& $this->getDBO();
$query = “SELECT * FROM ” . $db->nameQuote(‘#_jootags_tags’) . ” WHERE ” . $db->nameQuote(‘title’) . ” LIKE ‘$search%’”;
$db->setQuery($query);
$result = $db->loadResultArray();

// return the ajax data
return $result;
}

called from here :-

function display() {
$ajaxData = $this->get(‘AjaxData’);
$doc =& JFactory::getDocument();
$doc->setMimeEncoding(‘application/json’);
echo json_encode($ajaxData);
}

And this is in my form code :-

<script language=”javascript” type=”text/javascript”>

var searchInput = $(‘search-field’);

// A simple spinner div, display-toggled during request var indicator = new Element(‘div’, { ‘class’: ‘autocompleter-loading’, ‘styles’: {‘display’: ‘none’} }).injectAfter(searchInput); // appended after the input

var completer = new Autocompleter.Ajax.Json(searchInput, { ‘url’: ‘index.php?option=com_situploads&view=upload&format=raw’, ‘postVar’: ‘q’, ‘onRequest’: function(el) { indicator.setStyle(‘display’, ”); }, ‘onComplete’: function(el) { indicator.setStyle(‘display’, ‘none’); } });

</script>

The field in the form :-

<input type=”text” id=”search-field”/>

Many thanks,

Mark.

marka · 1 year ago

Have solved my problem - just needed a "window.addEvent('domready', function() {" around my javascript code.

Apologies for the messy posts, please delete them if possible.

Thanks,

Mark.

kow · 1 year ago

Works fine for me. For first time :)

Gedei · 1 year ago

Good evening,

I try to get this script working but my provider doesn't support "json". I think that instead of using :
new Autocompleter.Ajax.Json

i have to use :

new Autocompleter.Ajax.Base

Then i've tried but it doesn't work, i give my sources:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script src="mootools.js" type="text/javascript"></script>
<script src="Observer.js" type="text/javascript"></script>
<script src="Autocompleter.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
new Autocompleter.Ajax.Base('fe-searchuser',{'postVar': 'searchuser'});
});
</script>
<link rel="stylesheet" type="text/css" href="Autocompleter.css" media="screen" />
</head>
<body>
<form method="POST" action="poster.php">
<input type="text" name="searchuser" id="fe-searchuser" />
</form>
</body>
</html>

poster.php contain:

<?php

include('query_user.php');

if (isset($_POST['search']))
{
$search = $_POST['search'];
}

$result = array();

// Some simple validation
if (is_string($search) && strlen($search) > 2 && strlen($search) < 64)
{
$dbh = new PDO('mysql:host=localhost;dbname=sivoussaviez', $user, $pass);

// Building the query
$stmt = $dbh->prepare("SELECT design FROM sapponia WHERE titre LIKE ?");

// The % as wildcard
if ($stmt->execute(array($search . '%') ) )
{
// Filling the results with usernames
while (($row = $stmt->fetch() ) )
{
$result[] = $row['titre'];
}
}
}

// Finally the JSON, including the correct content-type
//header('Content-type: application/json');

echo $result;
?>

Thank you for your help

Ethan · 1 year ago

Would it be possible to have a translation of the php page into asp.net C# please ?

I really need it but i am quiet a noob in C#...thank you so much

Ruben · 1 year ago

Hello, great code Indeed.

It works great i just have a couple of questions, first is that there is way to deposit the value generated after the auto complete got a value ?

And also in other version there was an option for partial search, is there something like that now?

Ruben · 1 year ago

Sorry i got the filtersubset part =)

Also, there is a way to catch the value that is selected at the end?.

like var completer = new Autocompleter.Local('nombreCampo6', elementosCatalogo6,
{ 'minLength' : 3,
'maxChoices': 20,
'overflow' : true,
'filterSubset' : true,
'delay': 100
}

Thank you in advance

David · 1 year ago

For anyone looking for some in-depth documentation, CNET has written some up here: http://clientside.cnet.com/docs/3rdParty/Autoco...

Jesse James · 1 year ago

Anyway to return pair values, like string + id? Would be very helpful.

Nico · 1 year ago

I want to remove and destroy the autocompletion on my input text. And to create a new one on the same input text.

How can i destroy it?

var auto = new Autocompleter.Ajax.Json();
auto.destroy();

This work but i have a Javascript error : this.choice is null on line 267

Thanks for you help

Carsten · 1 year ago

Hi!

I'm using your tool like in the examples on the page. Everything works, I type something, my php-script sends the right json data and so on. But there's no drop down list!? I can select the different suggestions by using arrow up and down in the input field but I don't get any drop down list to use the mouse or to see all suggestions. What could cause this effect?

SKhan · 1 year ago

Does anyone have an example of this using XHTML instead of Json? Can't figure out how to use it with XML

Carsten · 1 year ago

Well, I found my "error": the drop down list was actually build and displayed but AT THE BOTTOM OF THE PAGE! And not directly under the input field. Is there any way to force the drop down field to be placed under the input field?

Carsten · 1 year ago

Okay, last post from me. :)

Give the element around the input field a "position: relative" and the "ul.autocompleter-choices" a "position: absolute". This worked for me, the drop down list is now under the input field.

karolis · 1 year ago

This example doesn't work for me even on latest upgrade of Opera :(

me · 1 year ago

Very sad that it is not usable due to not supporting Opera 9.5 :-(

Carsten · 1 year ago

??? It works with my Opera 9.5!

funkygu · 1 year ago

aasddsadaa

funkygu · 1 year ago

Sorry for my previous post.. (mod, delete that).

I really like your Autocompleter, but I can't seem to find documentation on it! The examples doesn't cover ALL it's features. I think its hard and to figure out all features just browsing your code..

Carsten · 1 year ago

Look some posts below: http://clientside.cnet.com/docs/3rdParty/Autoco...

It gets into more detail but to be honest it misses detailed examples. Some functions are still try and error and frustration...

Fabien · 1 year ago

Hi,

Ths script is good, but it doesnt work with Mootools 1.2 Final, is there an update somewhere ?
Thx

Obelix · 1 year ago

Does not work in Opera 9.5 - Error Console sais:
"JavaScript - http://digitarald.de/project/autocompleter/1-1/...
Timeout thread: delay 200 ms
Error:
name: TypeError
message: RegExp.prototype.test was called with the wrong number of arguments
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'"

Maybe that helps to fix the issue

Arnaud · 1 year ago

Is there an update for Mootools 1.12? Can someone tell me what do I have to change to make it work with this new version of mootools?

Arnaud · 1 year ago

oops not mootools 1.12 but mootools 1.2 :)

Arnaud · 1 year ago

oops sorry i had'nt seen that the las version was compatible 1.2, sorry for the trouble

xavitxxx · 1 year ago

Need an example of With JSON + PHP5/PDO (Autocompleter.Ajax.Json) couse the current one doesn't work
Don't know why?
PLEASE HELP!

Tom B · 1 year ago

The last version of this that I was using on one of my sites was using a funky spinner.gif "please wait while we retrieve results" type graphic.

That's the version that was using mootools 1.1

I've tried to get this to work, but it doesn't seem to want to come back. Is there an easy way of doing this, or has this functionality been dropped from this latest moootools1.2 compliant version?

Deeptanve · 1 year ago

Hi Harald ,
It is a nice script. I have added it in http://www.downloadjavascripts.com. Thanks a lot and keep generating nice stuff !!!!

Chris · 1 year ago

Very interesting piece of work... only it bugs in IE for me, probably some conflict with CSS, but works great in other browsers.

Now, a quick question, how would one go about submitting more than just the textbox? Say a textbox AND a checkbox?

xavitxxx · 1 year ago

In the example With JSON + PHP5/PDO
not work you have to correct

window.addEvent('domready', function() {
// this is wrong
// new Autocompleter.Ajax.Json('fe-searchuser', '/query_user.php', {
// 'postVar': 'search'
// });

var test = new Autocompleter.Ajax.Json('fe-searchuser', 'query_user.php', {
'postVar': 'search'
});
});

fatih_senel · 1 year ago

Hi everyone,

How can i do this with php4

xavitxxx · 1 year ago

U have to generate data like this in php4:
["Harald","Haribald","Harold","Harry","Haribald"]
Can U do it?

digitarald · 1 year ago

google for PEAR JSON

Chuckdesign · 1 year ago

hello all, can you please help me with some stupid bug?

this.parentNode.getElementsByTagName("span")[0] is undefined
[Break on this error] this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

Im getting this bug in fb console when i click into input which is used for autocompleter. Whats a problem?

harald · 1 year ago

Hi!

Can I use the scripts to control user input? The user should only insert capital letters into a text input field!

Jacob Kennedy · 1 year ago

Using the scrollbar (when overflow is set to true) is causing the Autocompleter to hide. Anyone know a solution? Anyone seen this before? I'm really struggling with this - I have to have the overflow and my users are really tied to their mice!

JJ · 1 year ago

Did you find a solution to this?

yorgo · 1 year ago

i've been having a crazy compatibility issue with this Autocompleter tool and Internet Explorer. It works great on Firefox (of course) and Safari. Internet Explorer, on the other hand, when I instantiate a new instance of Autocompleter.Ajax.Json it clears all the text on the screen. It's some kind of rendering issue because when I scroll the page up and down real quick the text comes back.

Anybody have or seen this issue?

...damn u IE

Rob · 1 year ago

Can you give an example on how to use the injectChoice options?
Im using the autocomplete on an email address - I hit the db - it shows the list populates the field, then in the onSelect event - I take that email - qry the database again based on that email - grab the data and fill the fields I need to w/ that data.
It seems that by using the injectChoice option, I should be able to return a list of ID & email, and when the email is selected, I go into the db w/ that ID and get the data.
Any help would be great. Also- Im limited to this version b/c the site was done w/ mootools 1.11 and we cant upgrade at this time,.
Thanks

Andreas · 1 year ago

Is it possible to send a second post variable, too?

Javier Seixas · 1 year ago

Firstable, congratulations for this excelent script. It is really useful.
I would like to leave a suggestion. The autosuggester would increase its usability if in case doesn't match any result, it notice that.

Thanks!

David Cramer · 1 year ago

I'm having an issue with it clearing the value from the input box on a refresh of the page (whereas it typically would not). I've been digging into the code for a few hours now (updating to the latest version of this and Mootools as well) but I still haven't found a solution to this.

Vincenzo Acinapura · 1 year ago

I have the same problem, it is very important for my project and can't find how solve this issue...
Script is wonderful, thanks Harald!

Javier · 1 year ago

mmmm muy curioso buen trabajo!!

Richard · 1 year ago

I've run into a situation. The script works great and perfectly as it should, but in the case the value is not in the list and the user types something else in, the value doesn't carry accross. is there a condition I have to add?

James · 1 year ago

Hello, I've noticed that when i use a static xml page (pure xml) to test this, it throws the following error...

xml is null
setSuggestions()(XMLHttpRequest)bsn.Auto..._c_2.0.js (line 308)
onErrorFunc()(XMLHttpRequest)bsn.Auto..._c_2.0.js (line 277)
processReqChange()()bsn.Auto..._c_2.0.js (line 677)
onreadystatechange()()bsn.Auto..._c_2.0.js (line 651)
[Break on this error] var results = xml.getElementsByTagName('results')[0].childNodes;

having read the php code, and since it isn't required to parse a pure xml file, I'm curious as to why there is an xml example, when it's not xml...

it's php generated xml, meaning that the xml file - if a static file is already created - will not functoin....

any suggestions?

xavitxxx · 1 year ago

I need Capturing value or ID item selected
from a collection of data which are as follows:
$array(1=>"valorA", 2=>"valorB", 3=>"valorC")
For example if I select "ValorC" requires grab identifier "3"
The object "Select from HTML" allows you to recover the value "3" selecting
"ValorC" from the SELECT html_object.
<select id="colData">
<option value="1">ValorA</option>
<option value="2">ValorB</option>
<option value="3">ValorC</option>
</select>

PLEASE HELP!

xavitxxx · 1 year ago

I need Capturing value or ID item selected
from a collection of data which are as follows:
$array(1=>"valorA", 2=>"valorB", 3=>"valorC")
For example if I select "ValorC" requires grab identifier "3"
The object "Select from HTML" allows you to recover the value "3" selecting
"ValorC" from the SELECT html_object.
<select id="colData">
<option value="1">ValorA</option>
<option value="2">ValorB</option>
<option value="3">ValorC</option>
</select>

PLEASE HELP!

balikesir · 1 year ago

nice work.!

Hex · 1 year ago

Textarea scroll bug fix: (1.1.2)
line 186:
from:
`'top': pos.bottom,`
to:
`'top': pos.bottom + this.element.getScroll().y,`

Chaffe · 1 year ago

Greetings, I'm using the autocompleter in a situation very similar to the HTML Request Span dictionary example here on the site. the only difference that I need to have done is keep the choices open even when the link is clicked. any thoughts on this is greatly appreicated.

elmowater · 1 year ago

Hey,
my script looks like this:
[code]
new Autocompleter.Request.JSON('fe-search', 'script.php?fkt=GetUser, {
'postVar': 'search'
});
[/code]
a print_r($_REQUEST) gives only a fkt='GetUser'
but the "search" string is missing! what is wrong?

Paul · 1 year ago

How would I use this to pull MySQL data?

Crayon · 1 year ago

Read the text above: "And the example PHP for the database query".

Tucker · 1 year ago

Has anyone found a way to make this script work with XML results?

Crayon · 1 year ago

Yes, with:
'postData': {
'extended': '1' // send additional POST data, check the PHP code
},
Check the "HTML Request" example.

Crayon · 1 year ago

Oups, this is a reply for Andreas question.

Chaffe · 1 year ago

Hi Harald, any thoughts on the ability to allow clicking on choice items while keeping the list open. (see my comment below for more details) Thanks.

WER · 1 year ago

43R4WR

WER · 1 year ago

dsaddasd

Mikejamesthompson · 1 year ago

I've been having a problem with Autocomplete in IE. Sometimes clicking on an option doesn't properly select it; instead the options lose focus.

I changed Autocompleter.js on line 358 to attach the choiceSelect method to the mousedown event instead of the click event and that seems to have fixed it.

Could the blur event have been being fired between mousedown and mouseup?

Mikejamesthompson · 1 year ago

I should add: this problem was in IE7 and using mootools 1.2

Crayon · 1 year ago

To fix that problem take a look at this Web site: http://code.google.com/p/cnetjavascript/source/...

Mikejamesthompson · 1 year ago

Thanks!

Richard · 1 year ago

Hello Harald,

For some reason i can't seem to get this thing working. It wont show anything when i type in the box, see: http://www.sportwijzer.nl/
the textfield under "Locatie" is the one that should show the suggestions. Please inform me with what is wrong there...
Thanks
richard at korebrits dot nl

Richard · 1 year ago

Nevermind, I found the error, i had some old javascripts that were making the error...

siv · 1 year ago

I'm using autocompleter its giving results 2 times i.e the result is over writing buy another result why its happening can any one help me plase

max · 1 year ago

Sorry, I'm a novice user. Please give a few tips how I might implement the autocomplete for use in a Wordpress comments field. I want to have the suggestions pulled from my Wordpress database. I can use the Google ajax library to host the script, so I just need to know what code to insert in/around the text input field. I understand the local, where tokens are already defined, but how to tell it to look at Worpress database comments? Thanks.

Davi · 1 year ago

i´m trying yo use this class but that showing me this erro:::
reference to undefined property this.options.indicator
[Break on this error] var indicator = $(this.options.indicator);

so how do i fix this??? thanks

Rob V · 1 year ago

Would love to an example of being able to select by typing in a name, have it go to the db and return the name and id, then be able to access the name and id in the OnSelect or onSelection function.

max · 1 year ago

You should offer this as a Wordpress plugin. It would be very popular!

Tyler Hauser · 1 year ago

I totally agree. This is EXACTLY what I'm looking for. It would be greatly appreciated if someone could port this.

max · 1 year ago

After figuring out how to make the JSON encoded query/output file display the correct data from database, I found an easy way to populate the var tokens for the example given in the local countries search. Just edit the var tokens line to include your php query JSON encoded output file. i.e.

Eric · 1 year ago

Can the tokens be anything other than simple strings. I want to send it a JSON object. But I don't need to use a server-side script to get it so I don't need to use autocomplete.request.

anyone have any ideas on handeling more complex tokens?

Andreas Schempp · 1 year ago

I noticed a VERY strange problem with Internet Explorer (7). If you autocompleter field is named "keywords" (or any other meta tag name), the keydown-event will not fire and so the autocompleter will not work.

Eric · 1 year ago

I'm trying to have one of the options be a specific item all the time. For example I always want the 3rd item in the choices list to be item - X...How would you do that?

Piotr · 1 year ago

Hi, this script is nice, but I have small problem.
When I try set this JSON structure:

{
"type":"full",
"cities":[{"idRegion":"7", "idDistrict":"147", "idCity":"186", "cityName":"Olki"},
{"idRegion":"3", "idDistrict":"247", "idCity":"12351", "cityName":"Olsztyn"}]
}

JavaScript show me error:
tokens.each is not a function
[Break on this error] }, this);

This is places where js put error:

tokens.each(this.options.injectChoice || function(token){
var choice = new Element('li', {'html': this.markQueryValue(token)});
choice.inputValue = token;
this.addChoiceEvents(choice).inject(this.choices);
}, this);

autocompleter.js (linia 270)

What I wrong ?
How I repair it ?

Nicolas · 1 year ago

If you want access name + id you can do this :

Return something like this from your php script
<li id="your_id">your name</li>

and in your page
var test = new Autocompleter.Request.HTML(....);

test.addEvent('onSelection', mafonction);

function mafonction(a,b,c,d) {
alert(b.id);
}

Piotr · 1 year ago

Ok, could you tell me, how can I create id="your_id" in tag "li" when I have this code:

tokens.each(this.options.injectChoice || function(token){
var choice = new Element('li', {'html': this.markQueryValue(token)});
choice.inputValue = token;

choice.id = ""; // ??????

this.addChoiceEvents(choice).inject(this.choices);
}, this);

code is 266 - 276 lines on acutocompleter.js.
Thanks for interesting my question.

Curuglef · 1 year ago

Hi Harald, this script is very nice but i have a problem
when i try to use the script with the options 'overflow':true in IE6 and IE7:
when i have many suggestion items and i move their selection (using the cursor keys)
to an item that is outside the viewable list, the suggestions dropdown don't jump down and the selected item doesn't appear.
With FF there isn't problem. I try to set the option 'overflowMargin' to different value but the result never change.
Excuse me for my bad english.

mike · 1 year ago

Similarly, if you click on the scroll bar, the dropdown goes away. (At least in IE6)

Lweel9 · 1 year ago

I had this problem. Aaron Newton has fixed it in his included copy with clientcide.

Curuglef · 1 year ago

Aaron Newton fixed the problem of the scrollbar but not the problem of the cursor keys.
Nobody can tell me how to fix this bug? thanks

zq0459 · 1 year ago

I have the same problem....

deetox10 · 1 year ago

I can't find aaron newton fix... Can anybody help me ?

Josef · 1 year ago

Unfortunately, I found some "backspace bug" in Autocompleter.Local when used with Internet Explorer 6!

*To reproduce,*
1. please use your Showcase "Local Tag", and
2. type "a" into the input field,
3. right after press ENTER (to select),
4. and then BACKSPACE (to
The first character "a" of the initially correctly selected entry then get's doubled (i.e. "**a**advertising," instead of "advertising")

I've already spent a few sleepless nights on it, but couldn't find the bug myself... Harald: **heeeeeelp**, please ;))
- Josef

*p.s.: thanks a lot for all your great work here!!!*

Josef · 1 year ago

I just checked with **IE 7** - the **same bug** applies there as well!!!

Here is once more how to reproduce this bug (IE6 or IE7): Go to the Local Tag showcase at http://digitarald.de/project/autocompleter/1-1/..., then - in the delicious search input - press the following keys: "a", "<ENTER>", then "<BACKSPACE>" - and the first letter gets duplicated... happens only if "type-ahead" and "multiple:true" are configured. Any help would be greatly appreciated!

MitS · 1 year ago

Hello,
I have a big problem. I have json array:
<pre>


var tokens = [{"aaa", "TEXT A", "1234"}, {"aab", "TEXT B", "4321"}, {"aac", "TEXT C", "3421"}];

</pre>

and HTML Form:
<pre>


<form action="#" method="post">
    <input type="hidden" name="ttt" id="ttt" value="" />
    <input type="text" name="what" id="what" value="" />
</form>

</pre>

When I write something to input type text (id="what") I want to show autocomplete list:
"aaa"
"aab"
"aac"

When I choice "aaa" then input type text (id="what") should has "TEXT A" value and input type hidden (id=ttt) should has "1234" value.

How can I do this ???
Please help me !!!

Piotr · 1 year ago

Hi
Would it be possible to add ability to display item with description and add to the input field only item?
In example: I'd like to display userName (firstName lastName), but if clicked only userName will be used

a · 1 year ago

how to let it support chinese words?

MitS · 1 year ago

Hi, my last question is out of date, but I have next one :) If I use autocompleter in multiple: true option then my postVar: cityTip is use for all string after coma example:


The same postVar
text1, text2

How can I correct autocompleter as postVar:cityTip work on first text (text1) but postVar:dupaZimna work on swcond text (text2) ?

TVR · 1 year ago

A neat feature would be support for 'choice' grouping (e.g. - 'optgroup' for select boxes).

Great work.

marfillaster · 11 months ago

If your data are key-value pairs such as

json
[['ph','Philippines'],['us','United States']]

where the first element is the key and the second is the
value(display purposes), you have to have atleast 2 html elements where one is
a hidden field while the other is the field to be transformed into an
autocompleter

markup
<input type="hidden" name="country_code" id="country_code"/>
<input type="text" name="country_code" id="country_code_autocomplete"/>

script
window.addEvent('domready', function() {
new Autocompleter.Request.JSON('country_code_autocomplete', 'country.php', {
injectChoice: function(token) {
var choice = new Element('li', {
html: this.markQueryValue(token[1])
});
choice.value = token[0];
choice.inputValue = token[1];
this.addChoiceEvents(choice).inject(this.choices);
},
onSelection: function(el, sel) {
$('country_code').set('value', sel.value);
}
}).observer.addEvent('onFired', function(val) {
if(!val)
$('country_code').set('value', '');
});
});

marfillaster · 11 months ago

If your data are key-value pairs such as

json
`[['ph','Philippines'],['us','United States']]`

where the first element is the key and the second is the
value(display purposes), you have to have atleast 2 html elements where one is
a hidden field while the other is the field to be transformed into an
autocompleter

markup
`<input type="hidden" name="country_code" id="country_code"/>
<input type="text" name="country_code" id="country_code_autocomplete"/>`

script
`window.addEvent('domready', function() {
new Autocompleter.Request.JSON('country_code_autocomplete', 'country.php', {
injectChoice: function(token) {
var choice = new Element('li', {
html: this.markQueryValue(token[1])
});
choice.value = token[0];
choice.inputValue = token[1];
this.addChoiceEvents(choice).inject(this.choices);
},
onSelection: function(el, sel) {
$('country_code').set('value', sel.value);
}
}).observer.addEvent('onFired', function(val) {
if(!val)
$('country_code').set('value', '');
});
});`

Julian · 11 months ago

Just another bump on the IE7 scrollbar issue. When you try to use the scroll bar on the dynamically built drop down choice list, it blurs the element and thus hides it. This isn't what happens in Firefox.

Someone said that the Clientcide library fixes it but I've been unable to see how or why.

Can anyone help?

Lars · 11 months ago

I spent some time to do a file comparison between the orgininal one and that from Clientcide. At the end I found the necessary changes to get the IE scrollbar issue solved. In the build-part (from "build: function() ..." on) you need to remove the following line near the end:

.addEvent('blur' ...

Instead of the removed line you need to type the following:

document.addEvent('click', function(e){
if (e.target != this.choices) this.toggleFocus(false);
}.bind(this));

This prevents losing the focus when clicking the scrollbar. It also fixes that issue for Opera which behaved the same like IE in that case.

nagaozen · 11 months ago

Yo Harald, I was implementing the v1.0 with a programmer here and found a miss-type in the How to use section.

The right arguments of Autocompleter.Ajax.Json is (el, url, options) instead of the (el, options).

@ var completer = new Autocompleter.Ajax.Json(searchInput, { ... }

David · 11 months ago

Hi
When I'm using Autocompleter with a database, that contains special characters like & and the like, Autocompleter somehow replaces these characters by the html substitution like & for &
How can I turn off this behavior? Though I wont ever find anything in my db this way...

Thanks for the help
David

RB · 11 months ago

Does anyone have luck with using this within a joomla implementation :( ?

fabio · 11 months ago

Theres a bug when you put selectFirst: true and theres just one option to select at the autocomplete.
It will submit the form when you hit enter, while it whould, since the first options is selected.
It doesnt happen with selectFirst: false.
patch - at line 129 of Autocompleter.js:
NOW:
if (this.element.value != this.opted) return true;
PROPOSED PATCH:
if (!this.selected && this.element.value != this.opted) return true;

So it will return true only if there is no selected option, which looks like what it should do.

My version of autocompleter is 1.1.2.
Mootools 1.2.1.

Thanks for the great plugin.

pmendelson · 11 months ago

I would like to place a link on my page that would launch the autocomplete dropdown. The HTML may look like

<button onclick="autocompleteObj.???">Click here for list</button>

I am unsre which function will launch the suggestion list?

alikon · 10 months ago

very instructive reading, i'm porting this usefull script on Joomla environment

micha · 10 months ago

Hi, this is a nice Tool !

but one comment ;)
The inicator Option should be better use the 'visibiliy' instead 'display' Parameter because else the Elements on Page 'moving'.

bionic · 10 months ago

At the moment I use AutoCompleter all the time. However, I would like to use it in an instance where I need key value pairs of information. I am pulling just the data back using json_encode and it works as it should. I cannot work out how to do anything with an array of key value pairs. I imagine that I should be able to select the data as normal and inject the key into a hidden field, but saying it and doing it are two different things. Any help would be appreciated as my Javascript / Mootools knowledge just isn't up to scratch yet.

By the way, the data is a list of contacts, so I could get duplicates if I don't have the id and it would screw the rest of my code up.

bionic · 10 months ago

At the moment I use AutoCompleter all the time. However, I would like to use it in an instance where I need key value pairs of information. I am pulling just the data back using json_encode and it works as it should. I cannot work out how to do anything with an array of key value pairs. I imagine that I should be able to select the data as normal and inject the key into a hidden field, but saying it and doing it are two different things. Any help would be appreciated as my Javascript / Mootools knowledge just isn't up to scratch yet.

By the way, the data is a list of contacts, so I could get duplicates if I don't have the id and it would screw the rest of my code up.

Julius · 10 months ago

Hi,

is there a way to target the selected word with a different value when the field is submitted?

I'm using a local mode and now when I'm submitting a word "Terms and conditions" it goes to page --> index.php?page=Terms and conditions which doesn't exists. It should be --> index.php?page=terms_and_conditions.

Shouls I give the suggestions-array a second url-value some how or what?

Thanks

Ben · 9 months ago

Hi Julius,

In the handler that deals with the onSelect/onSelection could you just replace the spaces with underscores in the input value you're reading before concat'ing it with the url? (Assuming soaces should always be converted to _ of course ;) )

Julius · 9 months ago

Thanks for your answer!

I'm not too familiar with these things, so is there a way you could tell me how to do this excaclty? I'd appriciate that a lot, thanks!

Ben · 9 months ago

Hi Julius,

It's going to depend on what your code is currently doing (of which I have no idea :) but something along these line:

function makeURL(theInput, selectedItem, theInputValue, selectedItemValue)
{
var underscoresAdded = selectedItemValue.replace(/ /g,"_");
var myURL = "http://to.somewhere.interesting.com?"+underscoresAdded;
}

and then in your Autocompleter declaration add the 'onSelection:makeURL' handler.

Hope that helps.

Ben · 9 months ago

Oops, I forgot to do anything with 'myURL' at the end of that function. Add:

window.location = myURL;

as the last statement in makeURL() to make it visit the page obviously ;)

Julius · 9 months ago

Ok, thanks so much.

That really gave me a huge help!

Julius

Ben · 9 months ago

Hi Harald,

Thanks very much for Autocompleter! One comment/query I had, at present, there doesn't seem to be a way to 'easily' get what the final selected value was. Yes, the onSelect and onSelection will tell you what the current textbox and hovered items are, but not the final choice. Normally this might not be a problem, but I only want to fire an event based on the final choice, and not everytime someone moves over a possible selection.

So, what I did was just add an extra line at the end of the choiceSelect method:

this.fireEvent('onChoice', [this.element, this.selected]);

and then defined my own onChoice handler.

This seems to work fine for my purposes, but I'm still feeling my way around mootools and javascript in general so I could be breaking something I'm unaware of ;)

If you think that's useful or not for a 1.1.3 version, feel free to add it! :)

Alan · 9 months ago

Hi,
I'm using this solution, and it works well. I second to add it to the release.

Thanks

Marc Fleischmann · 9 months ago

I've just started looking at this to replace the wick.js that we have been using for years.

The onChoice seems to only work when you use the mouse to select a choice. The onSelect, OnSelection, onBlur happen repeatedly during the user interactions. Is there a trigger that happens when they use the mouse to arrow keys and make a final selection?

Marc Fleischmann · 9 months ago

Let me be more specific., OnChoice works when you select with the mouse or move with the arrow keys and select with the Return/Enter. OnChoice is not called when you move with the arrow keys and select with the TAB key. I'm looking for a solution for all 3 cases.

Also is there a way to separate the width of the text box from the width of the suggestion box? With wick the suggestion box scaled to the necessary width and did not force the text box to be the same width.

Ben · 8 months ago

Hi Marc,

Enabling the tab key is fairly simple. In the onCommand definition just change:

case 'enter':

to

case 'enter': case 'tab':

and similarly remove the case 'tab' for the hideChoices() a few lines further down.

Cheers,
Ben

Julius · 9 months ago

Thanks for your answer!

I'm not too familiar with these things, so is there a way you could tell me how to do this excaclty? I'd appriciate that a lot, thanks!

CroNiX · 9 months ago

Does anyone know if this works with mootools 1.2.1? I tried (yes core and more are loaded) and get "tokens.each is not a function" in Autocompleter.js line 291.

Alan · 9 months ago

I have the same issue. Anybody has a solution?

CroNiX · 9 months ago

My error was coming from my json being returned. I was doing:
$results=array("key1"=>$somevalue, "key2"=>$somevalue2);
return json_encode($results);

The correct json was:
$results=array($somevalue, $somevalue2);
It cant be in key/pairs.

Alan · 9 months ago

Thanks, that solved the problem.
However, I need to manage a complete json object, not a simple array. I need to get 2 values (id and string) instead of getting the string only.

Is there a way to do that?

Thanks

CroNiX · 9 months ago

I was in the same boat. What I ended up doing was returning my data like: "name [id]" with ID in brackets, then on the php side, once the form was sent with the "name [id]" I used preg_match to grab the contents of the brackets (the id) and all is good. Not the way I want to do it as it looks ugly. I tried using the "injectChoice" option to create options for a select box. That would have been nice because then it could be <option value="id">string</option>. I got it to create the options but couldn't get it to inject them into the <select> for some reason so I gave up. The select box would have also been nice because it has a scrollbar. I could really use it because I am searching a database of over 2 million names and there are a LOT of names very similar. Im close, but no cigar unfortunately.

CroNiX · 9 months ago

Ive gotten it to pretty much do what I need it to. 1 last thing left. If I go to a page that has the box prepopulated with a search key, how do I get the autocompleter to search automatically?

var searchbox;
var auto;
document.addEvent('domready', function() {
searchbox = $('my_search);
//instantiate autocompleter
var auto = new Autocompleter.Request.JSON(searchbox, '/verify/search_name', {options});
if(searchbox.get('value') != '')
{
//how do I run autocompleter on the value of searchbox?
}
});

CroNiX · 9 months ago

Ah:


if(searchbox.get('value') != ''){
 		auto.prefetch();		
 }

:)

digitarald · 9 months ago

I'll add a demo for that case this month. Can you post/mail your
solution, I'd need to know the options you are using.

CroNiX · 9 months ago

Sent to your info account. I actually got this to work the way I needed it, although it might not be the best solution. Thanks Harald :)

Vagner · 8 months ago

I have same problem. Do you have a demo ?

bill · 9 months ago

while(1)
{
echo 'thnks';
}

iE · 9 months ago

It does not work work content_type = application/xmtml+xml

Jason · 9 months ago

I'm using this with the Autocompleter.Request implementation, but I cannot get it to work properly with 'fxOptions: null' set. It only selects if I use the arrow keys, not if I click.

I'll try to set up a demo when I have time, but it's a little tricky right now.

Shaxx · 9 months ago

Why if you type word: alcal
result is somthink like this :
alcal�
alcalae�a
alcalae�as
alcalae�os
..

randyjensen · 9 months ago

Has anyone been able to get this script working with an XML file? I've been trying anything possible for the last couple weeks to no avail.

Even a little hint in the right direction would be much appreciated...

Leo_Moon85 · 8 months ago

Hi,
I had implemented autocompleter control.
But I need control work like facebook or hotmail compose mail receiver list auto completer control.

It would be great if you provide such a solution using autocompleter.js

Manuel Jenne · 8 months ago

Harald, first of all: thanx a lot for this great script.

I'm running a page on ISo 8859-1 and having problems regarding the german umlaute on a Request.HTML.

For example hitting "nö" is sending "Ã¶" to my php script. the script does the db requests but nothing is found as in the db the entries are "nördlingen" for example. Beside the umlaute the script is working perfect.

Can you help on this topic? Thanks!

Dima · 8 months ago

I had the problem with russian letters. The page was in windows-1251 encoding. And the script received value in utf-8 encoding. I used this Perl code:

Encode::from_to($value, 'utf-8', 'windows-1251');

And it worked.

Alberto V. · 7 months ago

hi,

im having also problems with the encoding using Autocompleter.Request. I've a input text that sends the value for example látex (acute). Then i receive in my java servlet the parameter value l├ít , what its wrong (some king of codec error).

As i read above, with Autocompleter, its seems to reach to the destination request the parameters in UTF-8, but using conversion to ISO-8859-1 ( new String(value.getBytes("ISO-8859-1"), "UTF-8") ) also dosnt work. Can anyone help me with this?

windows xp - firefox 3.0.10 - mootools 1.2.2 - autocompleter 1.1.2

Kevin · 8 months ago

Has anyone used this when pulling the auto suggest values from a Mysql db with PHP?

digitarald · 8 months ago

Sample PHP code in the documentation (using PDO), its not that hard ;)

Habib Asseiss Neto · 8 months ago

Hello. It's a really nice script. Congratulations.
I was wondering if you got a solution for a <select> autocomplete, like some people were saying. It would be useful to me. Thank you!

elguapo09 · 8 months ago

Could you send it to me too?

elguapo09 · 8 months ago

Hmm, this comment was ment for CroNiX...

Habib Asseiss Neto · 8 months ago

Yeah. I'd like to know if digitarald got a solution for this, just like he said in his reply for CroNiX. Is it possible that AutoCompleter works with a select instead of an input? It would be awesome. Thanks.

Chris · 8 months ago

I'm having issues with the horizontal scroll bar in Safari. When the resulting text is longer than the set width, the horizontal scroll bar appears. When using Firefox, I can scroll left/right using the mouse w/o any issues. However, when I use Safari the script doesn't realize that I'm still in the container and my choices are hidden (like I clicked somewhere else on the page) . Any ideas how to fix this so I can use the horizontal scroll bar when viewing results in Safari? I'm using the 1.1.1 version, will upgrading fix this?

Pepe Bondiola · 8 months ago

It's awesome, thank you very much for developing the plugin.

digitarald · 8 months ago

Support and discussions moved to http://digitarald.de/forums/. If you already commented it here, please repost your question or bug report in the forum to get support.

dude · 8 months ago

looks like it's broken, probably your script link to mootools.

digitarald · 8 months ago

Thanks for the hint, just fixed it.

Mathias · 7 months ago

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});

multeek · 7 months ago

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.

Szotyi · 6 months ago

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" type="text" onfocus="javascript:if(this.value=='') {lol.observer.onFired();}" />

dissolute · 6 months ago

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.

dissolute · 6 months ago

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!

dissolute · 6 months ago

Ah, Clientcide skip the IE issue by changing the interaction - the choices only blur if you *click* outside them.

maxbow · 6 months ago

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

Sven · 4 months ago

Hi,

have made the same experience today. The example still isn't fixed:-(
Anyway: You've done a great job, thank you!

baaalji · 5 months ago

super work . thanks for sharing

baaalji · 5 months ago

super work . thanks for sharing

Plauto Rafael · 5 months ago

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

Jakso · 5 months ago

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)

Zoran · 5 months ago

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

ivan · 4 months ago

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);
}
});
});

ricardok1 · 1 year ago

Mootools 1.11

Should use another?!?

Pierre Bonneau · 1 year ago

use 1.0 version (on the right top of the page)

slabbi · 1 year ago

Small bugfix in Autocompleter.js:

build: function() {
if ($(this.options.customChoices)) {
this.choices = this.options.customChoices;
this.fix = new OverlayFix(this.choices);
} else {

"this.fix = new OverlayFix(this.choices);" is missing. If you define an own customChoice you will get "this.fix not defined" error later in the source.

Jacob Kennedy · 1 year ago

Instead of adding it to both branches of the it statement, why not move it from its current location to immediately after the if statement?

Would you mind posting your customChoices code? I'm having a hard time creating a custom choice that has a first part that matches the lookup and then two more values for display only.

Website

Original page

Subscribe

Community

Top Commenters

Popular Threads

digitarald:Harald K: AutoCompleter