How do I achieve ajax autocomplete using data-filter attribute in Jquery mobile -
i've been looking @ the:
data-filter="true"
option filtering list based on entered search box using jquery mobile.
i'd same except hook in ability use ajax get() populate list. know how go doing or example anywhere of being achieved. i've not seen on jq mobile site.
thanks.
i couldn't find built in ask, able achieve using simple ajax request , manually filling list. started text box search field, , empty ul
<div data-role="fieldcontain"> <label for="search">search:</label> <input type="search" name="search" id="search" value=""/> </div> <ul id="results" data-role="listview"> </ul>
this script block send ajax request after each key press, might better add delay though. abort previous request if still loading , person types key. not perfect, start.
<script> var last, last_xhr; var x = $('#search').live('keyup change', function () { if (last == $(this).val()) return; last = $(this).val(); $.mobile.showpageloadingmsg(); if (last_xhr) { last_xhr.abort(); } last_xhr = $.get('/search', { q: last }, function (data) { last_xhr = undefined; var list = $('#wines').empty(); $.each(data, function (i, val) { var el = $('<li data-theme="c" />'); el.append($('<a href="/page/' + val.id + '">' + val.name + '</a>')); list.append(el); }); list.listview('refresh'); $.mobile.hidepageloadingmsg(); }); }); </script>
the important bit calling refresh otherwise doesn't apply theme.
list.listview('refresh');
Comments
Post a Comment