When working on an application i needed an autocompleted input field. Because i allready was using Script.aculo.us for some effects i decided to use the ajax.autocompleter function.
The one big problem i faced is that i needed to update multiple fields, unfortunately the autocompleter function only updates one inputfield.
So i started working on a way to update multiple input fields, which i’m going to share with you.
Let’s get started.
First of all get your copy of prototype.js and script.aculo.us library’s and include these in a html file called index.html.
Next thing is to create our form
Add these lines to the head of your html file
Now make a new html file called “data.html” and paste these lines in it
- Result One
This is result one
- Result Two
This is result Two
- Result Three
This is result Three
Finally we’re going to do some basic css styling
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
}
Now your basic autocompleter should be working, time for the next steps.
We’ll create some input fields that we want to get updated after a result is selected.
Add this fieldset in the form we created earlier
Add the following option to the Autocompleter options, this will call the update function, after you selected a result.
afterUpdateElement: updateFields
[/source:javascript]
Like this:
[source:javascript]
Now we need to update the results file
- Result One
Car
Bycicle
Bus
Boat - Result Two
Clouds
Rain
Water
Lightning - Result Three
Earth
Wind
Fire
More…
And the final thing to add is the update function
function updateFields(element, selectedElement) {
var oResult = selectedElement.childNodes.item(1);
$(“a”).value = oResult.childNodes.item(1).innerHTML;
$(“b”).value = oResult.childNodes.item(3).innerHTML;
$(“c”).value = oResult.childNodes.item(5).innerHTML;
$(“d”).value = oResult.childNodes.item(7).innerHTML;
}
Now we’re done, the Autocompleter will update 4 extra input fields with data.
Check my personel testcase for a working sample.
There’s probably a better solution to solve this problem, but for now it works fine.
I’m planning to make a more dynamic way of updating fields in the near future, because it’s pretty static this way.
If you have any suggestions or i forgot something in my post please leave a comment.
Thanks for this! It really solved a problem for me.
This tutorial sucks balls.
Praxedis;
Some feedback could help
Hi, I see that in your example is working but I created the same exaple like you write in this article and is not working. I have an eror when add the text in the controle “Page can not be display!” The way for page is corectly but te aplication is not working. Can you help me with this?
It’s been a while since I wrote this post and it’s probably already outdated, I’m not sure it works with newer versions of script.aculo.us.
Could you put your code online so I can have a look at it?
This does the same as my code does. In IE it updates the values but not with the correct values as in FireFox.
If anybody can give me any pointers it would be appreciated.
Very elegant solution, thank you very much!.
How do I present the suggest lists just displaying two of these fields
eg Result Two, apples
I would like to build a people search which just displays name,phone but carries address,first,last-name,id etc..
Is not working!
Not even your example.. Autocomplete is suggesting the same item three times (id = 1 ; with Mozilla..)
Try to take a direct look at it’s suggesting script:
http://www.edouble-u.nl/testcases/autocomplete/result.php
:)
I camed back to appologize and to tell you why it’s not working (when we follow the above steps..).
Insted of the above suggesting_results page, use this and it will work:
Result One
Car
Bycicle
Bus
Boat
Result Two
Clouds
Rain
Water
Lightning
Result Three
Earth
Wind
Fire
More…
The problem was that the did not contained all the other spans..
I re-re-camed back because the blog’s editor striped the html code..
Insted of the above suggesting_results page, use this and it will work:
Result One
Car
Bycicle
Bus
Boat
Result Two
Clouds
Rain
Water
Lightning
Result Three
Earth
Wind
Fire
More...
The problem was that the
did’t contained all the other spans..
Result One
Car
Bycicle
Bus
Boat
Result Two
Clouds
Rain
Water
Lightning
Result Three
Earth
Wind
Fire
More…
<ul>
<li>Result One
<span class=\"informal\">
<span class=\"a\">Car</span>
<span class=\"b\">Bycicle</span>
<span class=\"c\">Bus</span>
<span class=\"d\">Boat</span>
</span>
</li>
<li>Result Two
<span class=\"informal\">
<span class=\"a\">Clouds</span>
<span class=\"b\">Rain</span>
<span class=\"c\">Water</span>
<span class=\"d\">Lightning</span>
</span>
</li>
<li>Result Three
<span class=\"informal\">
<span class=\"a\">Earth</span>
<span class=\"b\">Wind</span>
<span class=\"c\">Fire</span>
<span class=\"d\">More…</span>
</span>
</li>
</ul>
<ul>
<li>Result One
<span class="informal">
<span class="a">Car</span>
<span class="b">Bycicle</span>
<span class="c">Bus</span>
<span class="d">Boat</span>
</span>
</li>
<li>Result Two
<span class="informal">
<span class="a">Clouds</span>
<span class="b">Rain</span>
<span class="c">Water</span>
<span class="d">Lightning</span>
</span>
</li>
<li>Result Three
<span class="informal">
<span class="a">Earth</span>
<span class="b">Wind</span>
<span class="c">Fire</span>
<span class="d">More…</span>
</span>
</li>
</ul>
thanks anuntu.ro, the code in this article is already outdated and could be done in a much better manner, but i’m glad it helped you:)
very very great solutions but not worked in IE … oResult.childNodes.item(1).innerHTML is undefined!!!
please eelco….what is the much better manner?? worked for IE too
simone, unfortunately it’s been a long time I worked with script.aculo.us. It did work with IE as far as I can recall.
Sweet resource, just what I have been looking for.