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

私はこの投稿がとても古いことを知っていますが、今私は同じ問題に遭遇し、解決策を見つけました

data-children=".datasource"幸いなことに、最新の JQM (1.4.5)では、parent<ul>属性を簡単に追加できます。

詳細については、http: //api.jquerymobile.com/filterable/#option-childrenをご覧ください。

私の答えが、同じ問題に遭遇した他の人に役立つことを願っています。

于 2014-12-31T15:54:27.920 に答える