3

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

我的清单设置如下。我需要返回一个列表，其中包含与搜索词匹配的每个站点源和数据源（包括子元素）。

<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 元素 - 这可能需要自定义构建函数？

4

2 回答 2

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/

于 2013-01-22T19:16:18.757 回答
0

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

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

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

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

于 2014-12-31T15:54:27.920 回答