Question

我一直在看：

data-filter="true"

根据使用Jquery mobile输入到搜索框中的内容过滤列表的选项。

除了能够使用ajax get（）来填充列表之外，我还想做同样的事情。有没有人知道如何做到这一点或任何实现它的例子。我在JQ移动网站上没有看到任何东西。

感谢。

Answer 1

我无法找到任何内置的内容，但是我能够使用简单的ajax请求并手动填充列表来实现此目的。我开始使用搜索字段的文本框和空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>

此脚本块将在每次按键后发送ajax请求，但最好添加延迟。如果仍然加载并且该人键入另一个键，它将中止先前的请求。不完美，但它是一个开始。

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

最重要的是调用刷新，否则它不会应用主题。

list.listview('refresh');

如何在Jquery mobile中使用data-filter属性实现ajax自动完成

1 个答案: