HTMLでのリストの検索、並べ替え、フィルター

シンプルな7K List.jsミニスクリプトは、HTMLの箇条書きリストに対話性を追加します。 スクリプトを使用すると、新しい要素（ページ上のアドレス帳など）を追加または削除して、リストを簡単に検索、並べ替え、編集できます。 Chosenを連想させるものは、ドロップダウンリストのみが変更されています。



List.js-jQueryを必要としない通常のJavaScriptは、すべてのブラウザーで問題なく動作します。 こことここのいくつかの例を参照してください 。



List.jsは、MIT Public Licenseの下で公開されています。



たとえば、ユーザーがボタンをクリックするだけで、Webページに新しいリストを作成する機能を次に示します。



HTML

<div id="hacker-list"> <ul class="list"></ul> </div> <div style="display:none;"> <!-- A template element is needed when list is empty, TODO: needs a better solution --> <li id="hacker-item"> <h3 class="name"></h3> <p class="city"></p> </li> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javascript

 var options = { item: 'hacker-item' }; var values = [ { name: 'Jonny', city:'Stockholm' } , { name: 'Jonas', city:'Berlin' } ]; var hackerList = new List('hacker-list', options, values);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リストを検索およびソートするためのボタン。



HTML

 <div id="hacker-list"> <input class="search" /> <span class="sort" rel="name">Sort by name</span> <span class="sort" rel="city">Sort by city</span> <ul class="list"> <li> <h3 class="name">Jonny</h3> <p class="city">Stockholm</p> </li> <li> <h3 class="name">Jonas</h3> <p class="city">Berlin</p> </li> </ul> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javascript

 var options = { valueNames: [ 'name', 'city' ] }; var hackerList = new List('hacker-list', options);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般的に、すべては簡単です。 ダウンロードして自分の目で確かめてください。