Как я могу достичь автозаполнения ajax с помощью атрибута фильтра данных в мобильном телефоне Jquery - PullRequest
Новая
       0

Как я могу достичь автозаполнения ajax с помощью атрибута фильтра данных в мобильном телефоне Jquery

0 голосов
/ 21 июля 2011

Я смотрю на: 

data-filter="true"

опция для фильтрации списка на основе того, что введено в окно поиска с помощью мобильного телефона Jquery.

Я бы хотел сделать то же самое, за исключением возможности использовать ajax get () для заполнения списка. Кто-нибудь знает, как сделать это или пример где-нибудь из этого достигается? Я ничего не видел на мобильном сайте JQ.

Спасибо.

1 Ответ

0 голосов
/ 28 декабря 2011

Я не смог найти ничего встроенного, которое бы выполняло то, что вы просите, но я смог добиться этого с помощью простого запроса 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');
...