I have been trying to write a selector function for Autocompleter.Local that will show a predefined Array and will scroll automatically to the first match.  I have had success with with getting my list to populate and show all of the choices, however I cannot get it to scroll to the first match. 

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

Reply via email to