What's the event after selecting an entry in jquery autocomplete?

Question

We have a rails 3.2.8 app with jquery autocomplete. The app should fire an event after user selects a customer name from the list (#invoice_customer_name_autocomplete). After selecting, an ajax change event is fired. That's all the app should do. However the following code does not do the job (error: "t.item.customer is undefined"）. A user can not even select. The text box won't take customer name and the screen gets stuck:

//for autocomplete
$(function() {
  return $('#invoice_customer_name_autocomplete').autocomplete({
    minLength: 1,
    source: $('#invoice_customer_name_autocomplete').data('autocomplete-source'),
    select: function(event, ui) {
        $('#invoice_customer_name_autocomplete').val(ui.item.customer.name);
    },
  });
}); 

$(document).ready(function (){
    $('#invoice_customer_name_autocomplete').change(function (){
      //ajax call
      $.get(window.location, $('form').serialize(), null, "script");
      return false;
    });
});

If manually changing the customer name, the .change event will fire. However it does not fire after selecting. What's wrong with the code above?

UPDATE: If the select can trigger a change event on invoice_customer_name_autocomplete, then this is what we want. Tried the code below without success (no change event fired):

select: function(event, ui) {
   $(this).trigger('change');
}

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

You may be using the jQuery Autocomplete plugin I can't be sure, but you're calling it the way you would call the jQuery UI autocomplete.

In case you are using the first

Suggestions:

Use autocomplete in jQuery UI instead of the autocomplete plugin. The latter is deprecated.

Using the correct framework here is a example of it working: jsFiddle

It is no different from yours, so the thing is that you should log the ui object in order to understand why you are accessing a null object, the easiest way to do it is to log on console the whole object and watch it.

console.log(ui)

Edit:

Regarding the onChange you may check this post: trigger onchange event manually

Hope it helps!

edited May 23 '17 at 12:21

Community

1
1

answered Oct 27 '12 at 00:59

felipeclopes

4,010
2
25
35

It helps. Thanks. In application.js, here is what it looks like: //= require jquery //= require jquery_ujs //= require jquery_ui //= require_tree . – user938363 Oct 27 '12 at 01:19
TypeError: t.item.customer is undefined - This is the error in firebug console. Not sure where t is coming from. Pretty sure the error is caused by select: function(event, ui) {...} – user938363 Oct 27 '12 at 01:44
In this function, remove what you are doing and change it to console.log(ui) and then check what your object haves as properties. The problem is that your object don't have those properties and it is throwing an exception. – felipeclopes Oct 27 '12 at 12:44
I don't want to see the error, but the content of the ui object. It don't have to throw any error. – felipeclopes Oct 27 '12 at 12:52
item Object { label= "E-TEK Co.,LTD" , value= "E-TEK Co.,LTD" } – user938363 Oct 27 '12 at 13:57
The above the the item object value. It seems that ui.item.value should retrieve the value. – user938363 Oct 27 '12 at 13:58
With $(this).val(ui.item.value) in select:, the customer name selected is assigned to the text field. However the text field .change event is still not fired. Not sure why. – user938363 Oct 27 '12 at 14:10
Just updated the reply with how to trigger. Please accept the answer! :D.. And hope that I helped you solving the issue – felipeclopes Oct 27 '12 at 14:55
You got it! BTW do you know what's event triggered by selecting? – user938363 Oct 27 '12 at 16:28
The event triggered by the select is the selected event. It calls the callback 'select' that you defined. :D – felipeclopes Oct 27 '12 at 16:43
The change event was triggered. The problem is that the value of the autocomplete text field was still empty even though the $(this).val(..) is before the change event triggering. – user938363 Oct 27 '12 at 16:47
you don't need to set the val, look to my code here http://jsfiddle.net/felipeclopes/eRtZd/ – felipeclopes Oct 27 '12 at 20:53

What's the event after selecting an entry in jquery autocomplete?

1 Answers1