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

如果您查看已初始化的data-type="search"窗口小部件的HTML，您会看到搜索表单在list-view元素之前预先填写：

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

因此，根据这些信息，您可以看到要分别选择搜索输入到list-view元素，您的选择器应如下所示：

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

选择前一个兄弟元素到列表视图（<form class="ui-listview-finter">元素），然后是该元素的第一个子元素（），它应该是<input data-type="search" />元素。这也是一个非常快的选择器，使用ID然后使用单级遍历函数。

Answer 3

你在jQuery mobile中这样做了吗？你知道jQM通过AJAX加载后续页面吗？如果在后续页面中加载了#search id，则需要使用live或on事件，并且可以获取具有相同id的多个元素被加载的实例等等 - 需要注意的很多 - 如果菲尔的答案不起作用，它可能是你设置jQM网站的一个问题。

否则它应该可以工作，除非你在Android的Firefox浏览器上，我遇到过keyup问题。

mobile jquery - listview数据过滤器值

3 个答案: