Solution for restricting input values to the source returned by autocomplete

Solution for restricting input values to the source returned by autocomplete

I spent most of my day trying to implement input "validation" on a field employing the jquery ui autocomplete feature.  I'm not experienced enough with javascript to truly understand how terrible I am at it, so please be kind.

Problem: The out of the box autocomplete examples allow users to enter anything they want into the autocompleted field.

Ideal Behavior: If, upon field exit, the value left in the field does not match what any of the items returned by the source property, clear the field and any associated inputs.  

Solution: Assign logic to change event that runs the field's current value against the cached source items

  2. /*
  3. * Setup autocomplete on field value input
  4. * 
  5. * caches values for validation
  6. */
  7. var $cache = {};
  8. $('input#code_dsp').autocomplete({
  9. source: function(request, response) {
  10. $.ajax({
  11. url: $('input#code_dsp').attr('data-href'),
  12. data: {
  13. field: $('select#field').val(),
  14. search: request.term
  15. },
  16. type: "POST",
  17. dataType: "json",
  18. success: function(data) {
  19. // cache data for use in change event
  20.                                         $cache = data;
  21.                                         // returned data has value in "val" property
  22.                                         // and label in "label" and "value" property
  23. response(data);
  24. }
  25. })
  26. },
  27. minLength: 2,
  28. select: function(event, ui) {
  29.                         // preferred to have actual value in hidden
  30.                         // field and leave label in main field
  31. $('input#code').val(ui.item.val);
  32. },
  33. change: function(event, ui) {
  34.                         // assume we don't have a match
  35. var $match = false;
  36.                         // for each row of objects in json object
  37. for (var $row in $cache)
  38. {
  39.                                 // is current value match to label in row?
  40. if (this.value == $cache[$row].label)
  41. {
  42.                                         // found a match, input is validated!
  43. $match = true;
  44. console.log('Found match: '+$cache[$row].label);
  45. }
  46. }
  48. if ($match == false)
  49. {
  50.                                 // uh-ohs.  No match, so clear both input#code_dsp
  51.                                 // and the corresponding hidden input#code field
  52. console.log('No match.  Clearing input values');
  53. this.value = '';
  54. $('input#code').val('');
  55. }
  57. },
  58. focus: function(event, ui) {
  59.                         // found this in another forum post 
  60.                         // keeps the mouse-over event from dropping
  61.                         // the "hovered" item into the autocompleted
  62.                         // field.
  63. return false;
  64. }
  65. });
It seems to work well in my app.  Hope this helps someone.  By the way, I'm using jquery 1.4.2 and jquery-ui 1.8.