Scriptaculous Ajax.autocompleter stop preselect of first option item 1


I have this search feature on the search input of my sites, but was annoyed when I’d hit the enter button the keyboard to submit the search after the autocomplete items were visible. Instead of submitting the form as I desired, the first autocomplete option was entered into the input and then the form was submitted.

To disable the pre selection of the first result item in the autocomplete, do the following:

In controls.js of the Scriptaculous library, on line 286: change “this.index = 0;” to “this.index = -1;”


Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Scriptaculous Ajax.autocompleter stop preselect of first option item

  • M Hogerheijde

    In stead of ‘hacking’ the source of scriptaculous, you should extend the Ajax.Autocomplete object and replace the function. This way, you won’t have any problems with updating scriptaculous.

    Using the hint, setting index to -1, i’ve copy-pasted the code out of Ajax.Autocomplete and extended it to a custom Autocompleter:


    var MyAjax = { };
    MyAjax.Autocompleter = Class.create(Ajax.Autocompleter, {
    updateChoices: function(choices) {
    if(!this.changed && this.hasFocus) {
    this.update.innerHTML = choices;
    Element.cleanWhitespace(this.update);
    Element.cleanWhitespace(this.update.down());
    if(this.update.firstChild && this.update.down().childNodes) {
    this.entryCount = this.update.down().childNodes.length;
    for (var i = 0; i < this.entryCount; i++) {
    var entry = this.getEntry(i);
    entry.autocompleteIndex = i;
    this.addObservers(entry);
    }
    } else {
    this.entryCount = 0;
    }
    this.stopIndicator();
    this.index = -1;

    if(this.entryCount==1 && this.options.autoSelect) {
    this.selectEntry();
    this.hide();
    } else {
    this.render();
    }
    }
    }
    });

    Dont forget to use MyAjax.Autocompleter in the rest of your code in stead of Ajax.Autocompleter