Type-Ahead/AutoSuggestion for web text fields

Use this code to add type-ahead functionality for your web text fields. You can use a computed text field to perform @DbLookups or @DbColumns to produce the source datalists. It must be set to multi-valued with a comma delimiter. Each entry field must have a unique "Id" value assigned (example "Ingredient01") The code in the Onload event sets-up each field. The JSHeader code has two sections, the static standard reusable code and the source custom section which you cater to your source computed fields.
HTML • Lotus Formula

JSHEADER

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////	 Standard Reusable Type-Ahead Code	 /////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function AutoSuggestControl(oTextbox, oProvider ) {
this.provider = oProvider;
this.textbox = oTextbox;
//initialize the control
this.init();
};
AutoSuggestControl.prototype.autosuggest = function (aSuggestions) {
//make sure there's at least one suggestion
if (aSuggestions.length > 0) {
this.typeAhead(aSuggestions[0]);
}
};
AutoSuggestControl.prototype.handleKeyUp = function (oEvent) {
var iKeyCode = oEvent.keyCode;
//make sure not to interfere with non-character keys
if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
//ignore
} else {
//request suggestions from the suggestion provider
this.provider.requestSuggestions(this);
}
};
AutoSuggestControl.prototype.init = function () {
//save a reference to this object
var oThis = this;
//assign the onkeyup event handler
this.textbox.onkeyup = function (oEvent) {
//check for the proper location of the event object
if (!oEvent) {
oEvent = window.event;
} 
//call the handleKeyUp() method with the event object
oThis.handleKeyUp(oEvent);
}; 
};
AutoSuggestControl.prototype.selectRange = function (iStart, iLength) {
//use text ranges for Internet Explorer
if (this.textbox.createTextRange) {
var oRange = this.textbox.createTextRange(); 
oRange.moveStart("character", iStart); 
oRange.moveEnd("character", iLength - this.textbox.value.length); 
oRange.select();
//use setSelectionRange() for Mozilla
} else if (this.textbox.setSelectionRange) {
this.textbox.setSelectionRange(iStart, iLength);
} 
//set focus back to the textbox
this.textbox.focus(); 
}; 
AutoSuggestControl.prototype.typeAhead = function (sSuggestion) {
//check for support of typeahead functionality
if (this.textbox.createTextRange || this.textbox.setSelectionRange){
var iLen = this.textbox.value.length; 
this.textbox.value = sSuggestion; 
this.selectRange(iLen, sSuggestion.length);
}
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////	 Source Field Specific Code	 /////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function StateSuggestions() { this.states = document.forms[0].StaticINGChoices.value.split(", "); }
StateSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl, bTypeAhead ) {
var aSuggestions = [];
var sTextboxValue = oAutoSuggestControl.textbox.value;
if (sTextboxValue.length > 0){
//convert value in textbox to lowercase
var sTextboxValueLC = sTextboxValue.toLowerCase();
//search for matching states
for (var i=0; i < this.states.length; i++) { 
//convert state name to lowercase
var sStateLC = this.states[i].toLowerCase(); 
//compare the lowercase versions for case-insensitive comparison
if (sStateLC.indexOf(sTextboxValueLC) == 0) {
//add a suggestion using what's already in the textbox to begin it 
aSuggestions.push(sTextboxValue + this.states[i].substring(sTextboxValue.length));
}}}
//provide suggestions to the control
oAutoSuggestControl.autosuggest(aSuggestions, bTypeAhead);
};

function PrepSuggestions() { this.Prep = document.forms[0].PrepChoices.value.split(", "); }
PrepSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl, bTypeAhead ) {
var aSuggestions = [];
var sTextboxValue = oAutoSuggestControl.textbox.value;
if (sTextboxValue.length > 0){
//convert value in textbox to lowercase
var sTextboxValueLC = sTextboxValue.toLowerCase();
//search for matching Prep
for (var i=0; i < this.Prep.length; i++) { 
//convert state name to lowercase
var sPrepLC = this.Prep[i].toLowerCase(); 
//compare the lowercase versions for case-insensitive comparison
if (sPrepLC.indexOf(sTextboxValueLC) == 0) {
//add a suggestion using what's already in the textbox to begin it 
aSuggestions.push(sTextboxValue + this.Prep[i].substring(sTextboxValue.length));
}}}
//provide suggestions to the control
oAutoSuggestControl.autosuggest(aSuggestions, bTypeAhead);
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

OnLoad

var oTextbox1 = new AutoSuggestControl(document.getElementById("Ingredient01"), new StateSuggestions()); 
var oTextbox2 = new AutoSuggestControl(document.getElementById("Ingredient02"), new StateSuggestions()); 
var oTextbox3 = new AutoSuggestControl(document.getElementById("Ingredient03"), new StateSuggestions()); 
var oTextbox4 = new AutoSuggestControl(document.getElementById("Ingredient04"), new StateSuggestions()); 
var oTextbox5 = new AutoSuggestControl(document.getElementById("Ingredient05"), new StateSuggestions()); 
var oTextbox6 = new AutoSuggestControl(document.getElementById("Prep01"), new PrepSuggestions()); 

Images/Screenshots:

Written by Frank Joseph Brefere III

Posted by fbrefere001 on Tuesday September 12, 2006