jQuery ui自动完成不触发选择事件

Question

我有一个 jQuery 自动完成功能，并且永远不会触发 select 事件。

脚本如下所示：

$(function() {
    $('#AppName').autocomplete({
        minLength: 0,
        source: function(request, response) {
            var url = "/api/AddAppAjax";
            $.getJSON(url, { term: request.term }, function(data) {
                response(data);
            })
        },
        select: function (event, ui) {
            alert(ui.item.id); <---- !This is never hit!
            $('#selected-id').val(ui.item.id);
        }
    });
})

Web API 控制器操作如下所示：

public IEnumerable<object> Get(string term)
{
   var appManager = new AppManager();
   var appList = appManager.GetAllApps().AsQueryable().ToList();
   var appListJson = from fbApp in appList
   select new
   {
      id = App.Id,
      value = App.AppName,
      label = App.ToString()
   };

   return appListJson;
}

自动完成本身工作正常。这只是没有触发的事件。我尝试使用bind 和on 绑定到该事件，但这也无济于事。我也在change 事件上尝试过这个，也没有被解雇，或者在我看来是这样。我不知道为什么事件没有触发。

Answer 1

我想你也需要添加这个...

$( "#AppName" ).on( "autocompleteselect", function( event, ui ) {} );

You can check it out here

Answer 2

我遇到了同样的问题。对我来说，问题是辅助自动完成功能针对的是相同的元素。

在您的情况下，可能是 ('something').autocomplete() 也命中了 #AppName 元素。

Answer 3

看起来，你必须从源函数返回响应

$(function() {
    $('#AppName').autocomplete({
        minLength: 0,
        source: function(request, response) {
            var url = "/api/AddAppAjax";
            $.getJSON(url, { term: request.term }, function(data) {
               return response(data);
            })
        },
        select: function (event, ui) {
            alert(ui.item.id); <---- !This is never hit!
            $('#selected-id').val(ui.item.id);
        }
    });
})