Question

I’ve been looking at the:

data-filter="true"

option for filtering a list based on what is entered into a search box using Jquery mobile.

I’d like to do the same except hook in the ability to use an ajax get() to populate the list. Does anyone know how to go about doing this or an example anywhere of it being achieved. I’ve not seen anything on the JQ mobile site.

Thanks.

Answer 1

I couldn’t find anything built in that does what you ask, but I was able to achieve this using a simple ajax request and manually filling the list. I started with a text box for the search field, and an 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 will send an ajax request after each key press, it might be better to add a delay though. It will abort the previous request if still loading and the person types another key. Not perfect, but its a 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 most important bit is calling refresh otherwise it doesn’t apply the theme.

list.listview('refresh');