Question

I would like to get my autocomplete to return a “hidden” property when I blur out of the textbox or press enter. The data is in format {value: "Pal", pts: "30"}. I want to obtain pts. Here’s an example:

http://jsfiddle.net/ctuAg/4/

Typing a letter or two and choosing a name from the dropdown updates the “points” textbox as expected (10 times the name length). Now, I’d like to know if there’s a way of triggering this points update when a name is fully typed and then Enter is pressed, or blurred (tab or mouse click). That is, have the autocomplete search a match to the textbox value and update points.

So far as I’ve seen only clicking on a name in the dropdown causes the points to be updated.

I did some searching and the closest function/trigger I found was search. I tried placing this inside blur but .pts returns undefined. This might be the answer, how should I use it in my case?

    $("#autocomp").autocomplete({
      search: function(event, ui) {
        alert(ui.item.pts);
      }
    });

Answer 1

As a basic extension of your example, you can simply check whether the value of #autocomp is in the array on enter press:

$("#autocomp").keypress(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13') {
    $("#status").append("Enter pressed\n");

      /* NEW CODE HERE */
      // loop through the array and check the value against available names
      for ( var i = 0, l = names.length; i < l; i++) {
          // if the name matches, update #points
          if ($(this).val() === names[i].value) {
            $("#points").val(names[i].pts);
          }                      
      }              
      /* END NEW CODE */    

    $("#points").focus();
  }
});

Though it might not be the most efficient way to do it, it gets the job done. Fiddle here: http://jsfiddle.net/ctuAg/6/