No modifications are needed to any of the scriptaculous code. The
afterUpdateElement passes the arguments (text, li).to our callback
method, so you can access the contents of li as is, using its
innerHTML property. Sample code is as follows
new Ajax.Autocompleter(inputTextBox, listContainerDIV,
Yogesh,
I am stymied by one last hurdle as I get closer. I am loading text
embedded inside span elements and inserting them into the li
elements that comprise the drop down list items of the autocompleter.
Works just as required.
When the user selects one of the items in the list, I had assumed
My server-side script generates the ul.../ul structure to pass
back to the update div element. The li elements contain some
text embedded inside span. Here is a sample of what the server-side
script passes back to the Ajax.Autocompleter instance:
ul
li style=overflow:auto;span
Hi Ashwin,
How about floating the span elements? I have similar list and I use
float. Add a class to your span elements. In CSS, assign a width and
float them left or right as per your requirement.
HTH.
Yogesh
Ashwin wrote:
One of the reasons I like the Google Suggest powered autocomplete
Hi Yogesh,
You gave me some food for thought! I added float:left; and width:
300px; attributes to all the span tags just to see how that turns
out. When I do that, the span elements are outside the enclosing
li elements, one below the other. I am no CSS expert, so I could be
messing up somehow
I have a list with 3 columns. This is the code. You just modify it a
little bit for your page.
li
Name
span class='citystateinlist'City,State/span
span class='dateinlist'Date/span
/li
.dateinlist{
float: right;
width: 80px;
}
.citystateinlist{
float: right;
width: 150px;
}
Ashwin
In addition to your snippet, I had to add the following CSS attributes
to the LI element:
position: relative;
overflow: auto;
and slightly increased the width of the container UL element. It is
now showing up as expected.
Thanks for your help!
Ashwin
On Nov 11, 2:15 pm,
Sure, glad that I was able to help you !
Yogesh
Ashwin wrote:
In addition to your snippet, I had to add the following CSS attributes
to the LI element:
position: relative;
overflow: auto;
and slightly increased the width of the container UL element. It is
now showing up as expected.
