mobile jquery - значение фильтра данных просмотра списка

Question

Как запросить значение поискового запроса, выполненного в окне поиска фильтра данных?

ех.

 <ul  id="search" data-role="listview" data-inset="true" data-filter="true">

var searchValue = document.getElementById("search").value

(использование не работает, относится к <ul>, а не к текстовому полю поиска.)

Кроме того, как мне вызвать событие 'keyup' при наборе в окне поиска?

$("#search").keyup(...)

тоже не работает.

Хотелось бы сделать это без необходимости создания отдельного окна поиска, поскольку тогда мне придется создавать систему фильтрации с нуля.

Извините, я новичок, поэтому любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Работает ли это?

JS

$("input[data-type='search']").keyup(function() {
    alert('Value: '+$(this).val());
});

Альтернатива

$("input:jqmData(type='search')").keyup(function() {
    alert('Value: '+$(this).val());
});

Answer 2

Если вы посмотрите на HTML для инициализированного виджета data-type="search", вы увидите, что форма поиска предварительно добавлена ​​непосредственно перед элементом списка:

        <form class="ui-listview-filter ui-bar-c" role="search">
            <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c">
                <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-c">
                <a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-input-clear-hidden" title="clear text" data-theme="c">
                    <span class="ui-btn-inner ui-btn-corner-all">
                        <span class="ui-btn-text">clear text</span>
                        <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
                    </span>
                </a>
            </div>
        </form>
        <ul data-role="listview" data-filter="true" class="ui-listview">
            <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
        </ul>

Таким образом, учитывая эту информацию, вы можете видеть, что для выбора входных данных для поиска, соответственно элементу списка, ваш селектор должен выглядеть примерно так:

$("#search").prev().children().first().keyup(...)

, который выбирает предыдущий элемент одного уровня для представления списка (элемент <form class="ui-listview-finter">), затем первый дочерний элемент этого элемента (), который должен быть элементом <input data-type="search" />. Это также довольно быстрый селектор, использующий идентификатор и одноуровневые функции обхода.

Answer 3

Вы делаете это в мобильном jQuery? Знаете ли вы, что jQM загружает последующие страницы через AJAX? Если этот идентификатор #search загружен на следующей странице, вам нужно использовать событие live или on, и вы можете получить случаи, когда загружается более одного элемента с одинаковым идентификатором и т. Д. Ответ Фила не сработает, но это может быть связано с настройкой сайта jQM.

В противном случае он должен работать, если вы не используете браузер Android Firefox, с которым у меня были проблемы с keyup.