Autocomplete, AJAX, Example, Framework, HowTo, JavaScript, Scriptaculous, Strict

Dev weblog

Strict Autocomplete with Scriptaculous (Part II)

Ajax, Development, JavaScript July 25th, 2007

These days when I showed my example to some friends I realized that in fact even the second example had potential bugs. In fact not a bug, but missing functionality which could mislead the user while using the component.

What I found: When the user prefer to type instead of selecting the value from the list, then it’s possible to have “nothing selected” in ID field, but in fact the user have feeling that he select the correct value. This is extremely valid when the options are short and typing 3-4 chars which in fact is more convenient to type instead of selecting.

In the “perfect” world - especially in that example which I am interested with, the user need to enter valid ID once he/she try to enter something in the field. Well, then the solution provided is not the perfect solution.

Realizing that, I start searching in Scriptaculous lib how to handle it. In fact, in Autocompleter there is no callback function for onComplete action /then the list is ready after Ajax request/. I search over the Internet about it, but I didn’t find anything which could help me especially with Scriptaculous lib. Then I decided to make the small add-on in the core lib and to modify that part which will do this “select first option from available”.
I did with the following code in controlls.js file:

The original function was:

onComplete: function(request, element) {

    this.updateChoices(request.responseText);

}

After my modification I have also extra call back as well as the required functionality.

onComplete: function(request, element) {

this.updateChoices(request.responseText);

if(this.options.selectFirst == true){

      currentValue = this.element.value.toLowerCase();

      this.selectEntry();

      currentText = this.getCurrentEntry().innerHTML.toLowerCase();

      if(currentText.indexOf(currentValue) == 0){

          if(this.element.createTextRange){//IE

              this.element.value = currentText;

              sRange = this.element.createTextRange();

              sRange.findText( currentText.substr(currentValue.length) );

              sRange.select();

          } else { //Mozilla or other

              this.element.value = currentText;

              this.element.setSelectionRange(currentValue.length, currentText.length);

          }

      }

    }

    this.options.customCallback();

  }