Since I build the JS Array I can know exactly how many items are in the list going into my selector, but I don't ever know the offset for a single <li> to be able to set the scrolling height.
I am fairly certain that the onShow method is not the place to try to do it, but I haven't had any success with any of the methods that I have tried to override either.
Any solutions/insights are welcome!
Here is my work in progress:
<style>
#auto_complete {
width: 355px;
height: 150px;
background: #fff;
overflow: auto;
}
#auto_complete ul {
border: 1px solid #888;
margin:0;
padding:0;
width: 98%;
list-style-type:none;
}
#auto_complete ul li {
margin:0;
padding:0;
}
#auto_complete ul li.selected {
background-color: #ffb;
}
#auto_complete ul strong.highlight {
color: #800;
margin:0;
padding:0;
}
</style>
<div id="auto_complete" style="display: none;"></div>
<script type="text/_javascript_" language="_javascript_" charset="utf-8">
opts = new Array(<%= @tags.sort_by{|t| t.display_name}.collect!{|t1| '"' + t1.display_name + '",'} -%>'');
// <![CDATA[
box = new Autocompleter.Local('article_keywords','auto_complete', opts
, { tokens: new Array(' ',',','\n'),
/* start selector */
selector: function(instance) {
var ret = []; // Beginning matches
var entry = instance.getToken ();
var firstMatch= -1;
for (var i = 0; i < instance.options.array.length; i++) {
var wasMatch = false;
var elem = instance.options.array[i];
var foundPos = instance.options.ignoreCase ?
elem.toLowerCase().indexOf(entry.toLowerCase()) : elem.indexOf(entry);
while (foundPos != -1) {
if (foundPos == 0 && elem.length != entry.length) {
wasMatch = true;
if (firstMatch < 0){
firstMatch=i;
}
ret.push("<li class=\"selected\"><strong>" + elem.substr(0, entry.length) + "</strong>" +
elem.substr(entry.length) + "</li>");
break;
}
foundPos = instance.options.ignoreCase ?
elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
elem.indexOf(entry, foundPos + 1);
}
if(wasMatch==false){
ret.push("<li>" + elem + "</li>");
}
}
instance.options.picked=firstMatch;
instance.index=firstMatch;
return "<ul>" + ret.join('') + "</ul>";
}
//end
});
// ]]>
</script>
I did try to make a function that would scroll outside of the Autocompleter, but it doesn't work based on the fact the auto_complete <div> may not be showing yet:
function scrollme(box) {
var topItem = Position.cumulativeOffset(box.getEntry(0));
var selItem = Position.cumulativeOffset(box.getEntry (box.index));
box.update.scrollTop=selItem[1]-(topItem[1]+15);
}
scrollme(box);
Please help me!!!
Thanks,
-Steve
_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs@lists.rubyonrails.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs