CODEWITHSUNDEEP
jquerylistviewjquery-mobilejquery-autocomplete
JoshDG
JoshDG

Reputation: 3931

jQuery Mobile: Listview Filter Search Callback Function

Hey so I want to have a filter search such that you enter two letters of a search and the corresponding results appear in a list view. I can't load the entire list as is typical with the jqm listview because its way too big. Can someone please show me how to do this...its a bit beyond my scope of understanding the API.

I know how to use the autocomplete widget for jquery, but I want the results formatted as a listview. So a textbox, and then under it the listview formatted results, but only after two letters have been entered would I like it to display results, that way it doesn't show a giant list which would take too long to load.

Upvotes: 5

Views: 2958

Answers (2)

Alex
Alex

Reputation: 2349

Check out this here: https://github.com/commadelimited/autoComplete.js
Seems like what you are looking for.
Alex

Upvotes: 1

Daniel Lorenz
Daniel Lorenz

Reputation: 4336

I will assume your call is returning JSON:

$("#txtInput").change(function() {
   var val = $(this).val();
   if (val.length >= 2)
   {
       // Do Ajax call
        $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '/SomeURL/',
        data: "{'searchText': '" + val + '}',
        success: function (data) {
           $("#divListArea").empty();
           var i;
           for (i = 0; i < data.length; i++)
           {
              $("#divListArea").append("<div key=" + data[i].Id + ">" + data[i].SomeProperty + "</div>");
           }
           $("#divListArea div").each(function() {
              $(this).click(function() [
                 // Do something
                 var id = $(this).attr('key');
              });
           });
         },
         complete: function () {

         }
    });
   }
});

Upvotes: 0

Related Questions