Question

I am using the jquery/ajax autocomplete, below is the code snippet of my simple app:

external .jsp:

    $(function () {
     $("#inputfield").autocomplete({
     source: '/fruitapp/findFruit'
     });
    });

and in my controller:

    def findFruit = {
     def fruitsearch= Fruit.withCriteria {
      ilike 'fruit', params.term + '%'
      }
     render (fruitsearch?.'fruit' as JSON)
    }

As you can see, it will only fill in a single text field which is the “inputfield”. Now, I want that if I select an item from the autocomplete list, it will fill in at least two fields. How would I do it?

Thanks in advance.

Answer 1

The autocomplete can get a “select” event. There you can do whatever you want.

From their documentation

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

Here is a fiddle I made from their example.
As you can see, once an autocomplete option is selected, I am updating 2 different divs.

This is the code responsible for it:

$( "#tags" ).autocomplete({
            source: availableTags, 
            select:function(e,u){ 


                console.log([e,u]);
                $("#output").text("This is the label:" + u.item.label);
                $("#more_output").text("this is the value:" + u.item.value);

            }
  });

And just to be perfectly clear – “u” can contains anything you want.

Here I modified the fiddle to contain a single complex JS object. You can access all the fields.

I added a log print for you to see. Use chrome’s developer tools to see the log print and view objects’ content.