jQuery: Textbox text change event after autocomplete?

Question

I'm using jquery autocomplete plugin for a textbox:

$('#TargetArea').autocomplete({
    source: '@Url.Action("GetTarget", "Ads", new { type = "Zip", term = target })'  
    });

It works fine. Now, I want to do is: when the textbox text changed, call an action to get data from database, then show the data in another div.

$('#TargetArea').change(function () {
       var url = "/My/Test";
       var target = $("#TargetArea").val();
       $.post(url, { Target: target }, function (data) {
           $("#resultId").html(data);
       });
   })

However, this change event never triggered. If I comment out the autocomplete part, then it works fine. Anyone knows what the problem is? or, How I should do this?

Thanks

the `autocomplete` object seem to have a `change` property as it was used here: http://stackoverflow.com/questions/6431459/jquery-autocomplete-trigger-change-event — whastupduck, Oct 30 '14 at 18:38

score 0 · Answer 1 · answered Oct 30 '14 at 18:40

I think you should use the change event of the autocomplete plugin.

See the documentation here: http://api.jqueryui.com/autocomplete/#event-change

Check it, I think it should works.

$( "#TargetArea" ).autocomplete({
  source: '@Url.Action("GetTarget", "Ads", new { type = "Zip", term = target })',  
  change: function( event, ui ) {}
});

score 0 · Answer 2 · answered Oct 30 '14 at 18:57

you can make this either

1 - Initialize the autocomplete with the change callback specified:

    $( '#TargetArea' ).autocomplete({
      source: '@Url.Action("GetTarget", "Ads", new { type = "Zip", term = target })',
      change: function( event, ui ) {
       var url = "/My/Test";
       var target = $("#TargetArea").val();
       $.post(url, { Target: target }, function (data) {
           $("#resultId").html(data);
       });
      }
    });

or

2- Bind an event listener to the autocompletechange event:

$('#TargetArea').autocomplete({
    source: '@Url.Action("GetTarget", "Ads", new { type = "Zip", term = target })'  
    });

    $( '#TargetArea' ).on( "autocompletechange", function( event, ui ) {
                            var url = "/My/Test";
                            var target = $("#TargetArea").val();
                            $.post(url, { Target: target }, function (data) {
                                    $("#resultId").html(data);
                                   });
                            });

This will be triggered when the field is blurred, if the value has changed.

Source : http://api.jqueryui.com/autocomplete/#event-change

jQuery: Textbox text change event after autocomplete?

2 Answers2