WEB: Editable combobox with Typeahead autocomplete

HCL Domino Domino Forum
1

Hi,I want to have an Editable combo box with auto complete text if the value is already there.

New values are not to be entered but ‘Typeahead’ functionality is required (like internet explorer shows user names). Domino based form and fields should be used. if someone has developed or you have any idea? solution is required for browser application.

2

Subject: WEB: Editable combobox with Typeahead autocomplete

I use the code below (I found it somewhere on the web, but don’t remember its author - sorry).I call it on onkeydown field event.

You may be able to tweak it for comboboxes.

HTH,

Simeon

var typeAheadInfo = {last:0,

                 currentString:"", 

                 delay:500,

                 timeout:null, 

                 reset:function() {this.last=0; this.currentString=""}

                };

function typeAhead() {

if (window.event && !window.event.ctrlKey) {

  var now = new Date();



  if (typeAheadInfo.currentString == "" || now - typeAheadInfo.last < typeAheadInfo.delay) {



     var myEvent = window.event;

     var selectElement = myEvent.srcElement;

     var keyCode = myEvent.keyCode;

// S.Savov: do nothing if tabbed away from the field:

	 if (keyCode == 09) {

	 return false;

	 }

	 

	 // The NumPad returns slightly differant keyCodes then the numbers on the type of the keyboard.

	 // If we subtract 48 it will return the correct keyCode.

	 if (keyCode >= 96 && keyCode <=105) {

	 keyCode = keyCode - 48;

	 }         

     

     var newChar =  String.fromCharCode(keyCode).toUpperCase();

     typeAheadInfo.currentString += newChar;



     var selectOptions = selectElement.options;

     var txt, nearest;

     for (var i = 0; i < selectOptions.length; i++) {

        // change this from .text to .value to use the value of the item instead of the visual text if desired

        txt = selectOptions[i].text.toUpperCase();

        nearest = (typeAheadInfo.currentString > 

                   txt.substr(0, typeAheadInfo.currentString.length)) ? i : nearest;



        if (txt.indexOf(typeAheadInfo.currentString) == 0) {

           clearTimeout(typeAheadInfo.timeout);

           typeAheadInfo.last = now;

           typeAheadInfo.timeout = setTimeout("typeAheadInfo.reset()", typeAheadInfo.delay);

           selectElement.selectedIndex = i;



           myEvent.cancelBubble = true;

           myEvent.returnValue = false;



           return false;   

        }            

     }

     if (nearest != null) {

        selectElement.selectedIndex = nearest;

     }

  } else {

     clearTimeout(typeAheadInfo.timeout);

  }

  typeAheadInfo.reset();

}

return true;

}

3

Subject: RE: WEB: Editable combobox with Typeahead autocomplete

Thnx Simeon. yes it does work with combobox too.

for others, put follwoing code in ‘JS Header’ of the form.

var typeAheadInfo = {last:0,

currentString:“”,

delay:500,

timeout:null,

reset:function() {this.last=0; this.currentString=“”}

};

put rest of the code in ‘onkeyDown’ event of the combo box. and last line should be

typeAhead();// call the function.

4

Subject: RE: WEB: Editable combobox with Typeahead autocomplete

Hey fellas!

This is a great piece of code, but can this work on a combobox or listbox field that has the list populated by formula?

Would be handy, but I can’t seem to get it.