onselect event (Textbox)

The onselect event for textboxes activates when a selection is made from the auto-complete choices. The event can be specified as a JavaScript expression or the name of a JavaScript function.

If the name of a JavaScript function is specified, the function will receive a selection object which will contain name/value pairs for each field in the selected record of a database-driven auto-complete box. If the auto-complete functionality is specified with the use of static "choices" and "choice values", the selection object will contain the following 2 properties:

field1 - choice text
field2 - choice value

A second parameter can also be received, which will be a reference to the textbox DOM object.

Example 1: (Get the name/value of selected option by using the selection parameter)

function processSelection(selection) {
  alert("You selected " + selection.field1 + ".  The value for this choice is " + selection.field2 + ".");
}

processSelection;

Example 2: (Get the ID of the textbox widget by using the textBox parameter)

function myFunc(selection, textBox) {  
  var boxID = textBox.id; 
  alert(boxID)
}

myFunc;

Note: If the textbox has the float placeholder property enabled, the DOM structure of the textbox widget is altered, in that the textbox's <input> element is wrapped in a <div> element, which then adopts the widget's id. In this case, the onselect event handler could be written like in Example 3, below.

Example 3: (Same as Example 2, but supports widgets using floating placeholders)

function myFunc(selection, textBox) {
  var boxID;
  if (textBox.classList.contains("pui-floating-placeholder-input")) boxID = textBox.parentElement.id; // If floating placeholder exists, get the id from the parent div
  else boxID = textBox.id;
  
  alert(boxID);
}
 
myFunc;