View source for HTML Presentation Object: Search Textbox

This example code is a textbox with the following features:
* Textbox contents can be bound to a definable context variable (line '''var variableBinding<#uniqueId> = "myVariable1";''')
* There is a definable delay after which the typed text is set to the context variable ('''var inputDelay<#uniqueId> = 1000;''')
** Set the delay to '''0''', to disable it
* There is a magnifier button to "start the search" which stores the text immediately to the bound context variable
* Clicking the Enter key makes the same as clicking the magnifier button
* The magnifier button can be removed, to make the input textbox more generic (remove the line starting with '''<img''')
* Clicking the magnifier button can also change other context variables, such as open a separate view for the search results (add new command to function '''searchClicked<#uniqueId>''')

<pre>
<input id="content<#uniqueId>" type="text" placeholder="Search" onchange="textboxChanged<#uniqueId>(this);" onkeyup="textboxChanged<#uniqueId>(this);" onpaste="textboxChanged<#uniqueId>(this);" oninput="textboxChanged<#uniqueId>(this);" />
<img id="seachbutton<#uniqueId>" onclick="searchClicked<#uniqueId>();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNrkVDsOgkAUBGKvFtZQ2YqVjYkcAU8A3oDexF9i7xH0BtxALOzxBngDbG1wnnkmuNldwGjlJpPNft7s23mzaxZFYXy7WcYP2k9IW7rF9WbroSO4QAakQLxczHNdnCnTFGQdCgYmkpgbEIF4X5uUCRNgwAQxjx0gBGzeOlMRy0hpYwBc6eoIzBTrdKAjk8KSZBnwMBQJqWGOsj0Bbc68svou9xcEJ5pavK7tN7FUXuGa7BOfOhWkru5wS9Ar4QLY0NdXeJd0j3gY181099JNJC7ZjWx1B45NzJ+yT59FK/nU46obpTVPtJWp+qVAvCJFJEtnoAf0VcTKDwWbiLQLTOkMekHAEPNj9CMmM/hGCUujz7SqCc/5LduPvz4mII0P4vXN//75HwIMANu1eq4zLyyIAAAAAElFTkSuQmCC" />

<style>
#content<#uniqueId> {
  border-radius: 4px;
  border-width: 1px;
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
  padding: 2px 26px 0px 5px;
  display: inline;
}
#seachbutton<#uniqueId> {
  position: absolute;
  top: 17px;
  right: 17px;
  cursor: pointer;
}
</style>

<script>
var variableBinding<#uniqueId> = "myVariable1";
var inputDelay<#uniqueId> = 1000;
var pendingTimeouts<#uniqueId> = 0;

function searchClicked<#uniqueId>() {
  var textBoxValue = $("#content<#uniqueId>").val();
  qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
}

function <#contextChangeFunction>(changedContextVariables) {
  if (changedContextVariables[variableBinding<#uniqueId>] != null && $("#content<#uniqueId>").val() != changedContextVariables[variableBinding<#uniqueId>]) {
    $("#content<#uniqueId>").val(changedContextVariables[variableBinding<#uniqueId>]);
  }
  $("#content<#uniqueId>").keyup(function(event) {
    if (event.keyCode == 13) searchClicked<#uniqueId>();
  });
}

function textboxChanged<#uniqueId>(evt) {
  var textBoxValue = $(evt).val();
  if (inputDelay<#uniqueId> > 0) {
    pendingTimeouts<#uniqueId>++;
    setTimeout(function() {
      pendingTimeouts<#uniqueId>--;
      if (pendingTimeouts<#uniqueId> > 0) return;
      qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
    }, inputDelay<#uniqueId>);      
  } else {
    qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
  }
}
</script>
</pre>

[[Category: QPR UI]]