JQuery UI.AutoComplete : Cascading auto complete


We are here trying to fill the officer’s agency first and based on that we will fill officer’s last name auto complete too.

[Note : Make sure this is Jquery.UI.Autocomplete, not Jquery AutoComplete Plugin ]

Code : (Html – This is MVC code)

$(“#_officerAgency”).autocomplete({
source: function (request, response) {
$.getJSON(“/default/LookupTagsForAgencies”,
“q=” + $(“#_officerAgency”).val(),
function (data, status, xhr) {
response(data);
});
}

});
$(“#_officerLastName”).autocomplete({
source: function (request, response) {
$.getJSON(“/default/AsyncOfficerLastName”,
“q=” + $(“#_officerLastName”).val() + “&LEA=” + $(“#_officerAgency”).val(),
function (data, status, xhr) {
response(data);
});
}
});

Advertisements

5 thoughts on “JQuery UI.AutoComplete : Cascading auto complete

  1. What about when the complete data sources are given to the user on page load? (I.e. no ajax involved) How would one go about changing the data source for the second autocomplete based on the selection of the first?

    Like

    1. $(“#_officerAgency”).autocomplete({
      source: function (request, response) {
      $.getJSON(“/default/LookupTagsForAgencies”, “q=” + $(“#_officerAgency”).val(),
      function (data, status, xhr) {
      $.getJSON(“/default/LookupTagsForAgencies”, “m=’TEST'”;
      function (data,status,xhr)
      {
      // PRocess your second one here … you have data from 2nd datasource….
      }
      });
      }

      });

      Like

    1. Yeah this link is really nice … I almost forget to use autocompleteselect event … thanks for sharing this with me Max.

      I am glad that my info. help you in some way & sorry for not getting you entire solution.

      happy coding…

      Like

  2. Yeah this link is really nice … I almost forget to use autocompleteselect event … 🙂 thanks for sharing this with me Max.

    I am glad that my info. help you in some way & sorry for not getting you entire solution.

    happy coding… 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s