A auto selector for a select "Autoselector.Local", like Autocompleter.Local

Background

I needed a text field to automatically select items from a select list, To assist the users when coding on a form.

Within "script.aculo" there is a similar function Autocompleter that autocompletes, given a list of possible choices, this is done client/browser side

The Solution

To develop a autoselector, this would take the text field to monitor, a list of keywords to match, and input select to update

The JavaScript Code

Place the below code into say "application.js"

NOTE: This code required prototype.js, effects.js and controls.js to be included

//========================================
// Autoselector.local 
// Contributors:
//  Murray Speight (http://mspeight.blogspot.com/)
//========================================

// Define a client side Autoselector.Local, like "Autocompleter.Local"
// Requires, prototype.js, effects.js and controls.js
//
// Parameters: id of element to watch, id to update, and array of [keyword,value] pairs 
// The keyword can be a regular expression e.g. "deep.*vein"

var Autoselector = {};
Autoselector.Local = Class.create();
Autoselector.Local.prototype = {
  initialize: function(element, update, keyvalue ) {
    this.element     = $(element); 
    if ( this.element ) {
        this.update      = $(update);  
        this.options = {};
        this.keyvalue = keyvalue;
        this.observer = null;
        this.element.setAttribute('autocomplete','off');
        observer=this.onKeyUp.bindAsEventListener(this);
        Event.observe(this.element, "keyup", observer );
     }
  },
  onKeyUp: function(event) {
    // Scan the text for keywords, using regular expressions 
    var text=this.element.value.toLowerCase();
    for (i=0;i<this.keyvalue.length;i++) {
      var re=new RegExp('\\b'+this.keyvalue[i][0]);
      if ( text.search(re) >= 0 ) {
        var newvalue = this.keyvalue[i][1];
        if ( this.update.value != newvalue ) {
          this.update.value = newvalue;
          // If has an onchange event, Call it
          if ( this.update.onchange )
            this.update.onchange.call(this);
        } 
        break;
      }
    } 
  }
}

Example HTML Usage

Below is an example usage. Typically the keywords/choices will be generated by the back end application. This is a tiedied up example of the generated html

NOTE:Ensure the call to new Autoselector.Local is called after the controls are defined

<input id="case_subject" maxlength="78" name="case[subject]" size="46" type="text" />
 
<select id="case_coding_id" name="case[coding_id]" onchange="my_on_change_coding(); void 0;">
  <option value=""></option>
  <option value="1">Cellulitis</option>
  <option value="2">Deep vein thrombosis</option>
  <option value="3">Respiratory Infections</option>
</select>       

<script type="text/javascript">
//<![CDATA[
  new Autoselector.Local('case_subject','case_coding_id',
       [["absces", 1], ["abces", 1], ["cellulit", 1], 
        ["dvt", 2], ["deep.*vein", 2], ["thrombo", 2], 
        ["pneum", 3], ["bromo", 3]]);
//]]>
</script>