CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-autocompleteasp.net-web-api2
Elad Lachmi
Elad Lachmi

Reputation: 10561

jQuery ui autocomplete not firing select event

I have a jQuery autocomplete, and the select event is never fired.

The script looks like this:

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

The Web API controller action looks like this:

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;
}

The autocomplete itself works fine. It's just the event that isn't firing. I tried binding to the event with bind and on and that didn't help either. I also tried this on the change event, and that does not get fired either, or so it looks to me. I can't figure out why the event is not firing.

Upvotes: 2

Views: 6102

Answers (3)

Lars Klundby
Lars Klundby

Reputation: 11

I had the same problem. The problem for me was that a secondary autocomplete targeted the same element.

In your case it could be that ('something').autocomplete() also hits the #AppName element.

Upvotes: 0

Kushal
Kushal

Reputation: 1360

I think so you need to add this too...

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

You can check it out here

Upvotes: 3

Ammar Khan
Ammar Khan

Reputation: 2585

It looks like, you have to return response from source function

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

Upvotes: -2

Related Questions