JQuery autocomplete on text input customization field - xmpie-users/uStore-js GitHub Wiki

uStore customization steps often require your customers to enter tedious pieces of text which you could be able to lookup to save the customer time and effort; and also to help prevent typing mistakes.

JQuery's autocomplete has some nice features to do this, and using HTML generic controls is easy!

<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/jqueryui/jquery-ui.structure.min.css"/ >
<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/jqueryui/jquery-ui.min.css"/ >
<script src="/ustore/images/<skin folder>/jqueryui/jquery-ui.min.js" type="text/javascript"></script>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
  <tr valign="baseline">
    <td><div class="FormLabel" style="width: 190px;">#DIAL_DISPLAY_NAME#</div></td>
    <td><input id="autocomplete" value="#DIAL_VALUE#" /></td>
  </tr>
</tbody>
</table>
<SCRIPT type="text/javascript">
$("#autocomplete").autocomplete({
  source: ["Sydney","Adelaide","Melbourne","Canberra","Perth","Darwin","Hobart","Brisbane"],
  //source: "http://fx.xmpie.com/tubeStations.aspx", //source can also be a web page that returns JSON data (in this case London tube station names)
  select: function(event, ui) {
    if (ui.item) {
      returnValue(ui.item.value);
    }
  }
});
$('#autocomplete').on("change", function () {
  returnValue($(this).val());
});
</SCRIPT>

I have used this technique to lookup product codes from a customer's MIS system so that there is no mistake in the selected product code. This is nice because it allows a level of separation in that you don't need direct database access to the MIS - just a URL to a web page that can return the required data.

Note that when using the URL method, the characters that the users start to type are added to the URL as a query string parameter, so the URL needs to handle the filtering query based on the "term" parameter, for example: http://server/page.aspx?term=abc

At the top of the code example you will see a number of JQuery scripts and css files loaded. You can download your own themed scripts from JQuery UI download page. Remember to select the required components. This example requires autocomplete and menu widgets and some core utilities that are required for those widgets.

⚠️ **GitHub.com Fallback** ⚠️