jQuery：自动完成后的文本框文本更改事件？

Question

我正在为文本框使用jquery自动完成插件：

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

工作正常。 现在，我要做的是：当文本框文本更改时，调用一个操作以从数据库获取数据，然后在另一个div中显示数据。

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

但是，此更改事件从未触发。 如果我注释掉自动完成部分，则可以正常工作。 有人知道是什么问题吗？ 或者，我该怎么做？

谢谢

Answer 1

我认为您应该使用自动完成插件的change事件。

请参阅此处的文档： http : //api.jqueryui.com/autocomplete/#event-change

检查一下，我认为应该可以。

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

Answer 2

你可以做到这一点

1-使用指定的更改回调初始化自动完成：

    $( '#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);
       });
      }
    });

要么

2-将事件侦听器绑定到autocompletechange事件：

$('#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);
                                   });
                            });

如果值已更改，则在字段模糊时将触发此操作。

来源： http : //api.jqueryui.com/autocomplete/#event-change