Question

我需要能够在我的jQuery Mobile项目中实现一个过滤器，它允许我搜索嵌套列表并返回与输入到过滤器栏中的文本匹配的所有列表元素。基本上我需要扩展已实现的数据过滤器功能的功能，以显示嵌套列表项和可见列表项的结果。有没有办法修改数据过滤器行为？

我的列表设置如下。我需要返回一个列表，其中包含与搜索词匹配的每个sitesource和datasource（包括子元素）。

<ul>
<li class="sitesource">
    <ul>
        <li class="datasource"></li>
        <li class="datasource"></li>
        <li class="datasource"></li>
    </ul>
</li>
<li class="sitesource">
    <ul>
        <li class="sitesource">
            <ul>
                <li class="datasource"></li>
                <li class="datasource"></li>
                <li class="datasource"></li>
            </ul>
        </li>
        <li class="datasource"></li>
    </ul>
</li>
<li class="datasource"></li>
</ul>

我怀疑我可能需要做的是（在pageinit之后）搜索整个html文档并返回列表中所有匹配的sitesource和datasource元素 - 这可能需要一个自定义构建的函数？

Answer 1

这有点冗长，但似乎做了你要问的事情：

function filterSources(myVal){
var myFilter = myVal;

var dataSources = document.getElementsByClassName("datasource");

//array from nodelist    
var arr = [];
for(var i = 0, n; n = dataSources[i]; ++i) arr.push(n);

//filter for text    
var finalData = arr.filter(function(element){
        return $(element).text().indexOf(myFilter) > -1;
    })
//compile into string for output
var newStr = "";
for(var m in finalData) newStr += finalData[m].textContent + ", ";
$("#target").html(newStr);


}

$(function(){

filterSources
$("input#search_foo").keyup(function(){
    filterSources($(this).val())
    })
})

http://jsfiddle.net/klatzkaj/DEmWE/9/

Answer 2

我知道这篇文章太旧了，但是现在我遇到了同样的问题，并找到了解决方案

幸运的是，使用最新的JQM（1.4.5），您可以轻松地在父data-children=".datasource"属性上添加<ul>

了解更多信息：http://api.jquerymobile.com/filterable/#option-children

希望我的回答可以帮助其他遇到同样问题的人，问候

jQuery Mobile：过滤嵌套列表

2 个答案: