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

我认为你应该使用autocomplete插件的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