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