Geek asks and answers

JQuery Mobile: filtering nested lists

I need to be able to implement a filter in my jQuery Mobile project, which will allow me to search for a nested list and return all list items that match the text entered in the filter panel. Basically, I need to expand the functionality of the already implemented data filtering function to show results from nested list items, as well as from visible ones. Is there a way to change the behavior of a data filter?

My list is configured as follows. I need to return a list with each source and datasource site (including children) that match the search query.

<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- sourceource datasource - , , ?

+3
2

, , , , :

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/

+1

, ,

, JQM (1.4.5) data-children=".datasource" <ul>

: http://api.jquerymobile.com/filterable/#option-children

, , ,

0
source

More articles:


All Articles