検索関数filter liの純粋なJs

Question

純粋なJavaScriptの値に基づいて<ul>をフィルタリングする入力をしようとしています。それはonkeyupで動的にフィルタリングし、liを取得し、内側の要素名とフィルタテキストを比較する必要があります。ここで

は私の関数である。

var searchFunction = function searchFeature (searchString) { 
console.log("Is my search feature working?"); 
//Get the value entered in the search box 
var inputString = document.getElementById('inputSearch'); 
var stringValue = inputString.value; 
//Onkeyup we want to filter the content by the string entered in the search box 
stringValue.onkeyup = function() { 
    //toUpperCase to make it case insensitive 
    var filter = stringValue.toUpperCase(); 
     //loop through all the lis 
     for (var i = 0; i < eachStudent.length; i++) { 
     //Do this for all the elements (h3, email, joined-details, date) 
     var name = eachStudent[i].getElementsByClassName('student-details')[1].innerHTML; 
     //display all the results where indexOf() returns 0 
     if (name.toUpperCase().indexOf(filter) == 0) 
      eachStudent[i].style.display = 'list-item'; 
     else 
      eachStudent[i].style.display = 'none'; 
     } 
    }} 

検索バーのための私のHTML：

<div class="student-search"> 
<input id="inputSearch" placeholder="Type name here.." type="text"> <button>Search</button></div> 

李さんのための私のHTML：

<ul class="student-list"> 
    <li class="student-item cf"> 
     <div class="student-details"> 
      <img class="avatar" src="#"> 
      <h3>John Doe</h3> 
      <span class="email">John.Doe@example.com</span> 
     </div> 
     <div class="joined-details"> 
       <span class="date">Joined 01/01/14</span> 
     </div> 
    </li> 

私はフィルタリングしたいと思います入力の値に基づいてすべての要素（名前、電子メール、結合日）。 残念ながら、私には何の誤りもなく、単純に機能しません。私のコードでhttp://codepen.io/Delano83/pen/qaxxjA?editors=1010

任意のヘルプやコメントが非常に高く評価されていますにconsole.logプリント...

はここcodepenを行くので 機能が正しく起動されます。

Answer 1

いくつかの問題がありました：

• stringValue.onkeyup - のstringValueが値であるが。あなたはそれをonkeyupすることはできません。
• var eachStudent = document.querySelector(".student-item");は、student-itemクラスの最初のものをフェッチします。 querySelectorAllを使用するか、jqueryの$（ 'find-item'）を使用する必要があります。
• if (name.toUpperCase().indexOf(filter) == 0) indexOfは、フィルタが名前の冒頭に見つかった場合は0を返します。インデックス0に見つかった場合は0と一致します。-1と照合する必要があります。

それ以外は多かれ少なかれ、良い仕事。

私はJqueryを追加してより速く修正しました。あなたが純粋なjavascriptの使用を主張するなら、あなたはそれを編集できると確信しています。

こちらをご覧ください：http://codepen.io/anon/pen/WGrrXW?editors=1010結果のコードは次のとおりです。

var page = document.querySelector(".page"); 
var pageHeader = document.querySelector(".page-header"); 
var studentList = document.querySelector(".student-list"); 
var eachStudent = document.querySelectorAll(".student-item"); 
var studentDetails = document.querySelector(".student-details"); 


//Recreate Search Element in Js 
var searchBar = function createBar(searchString) { 

    var studentSearch = document.createElement("div"); 
    var input = document.createElement("input"); 
    var searchButton = document.createElement("button"); 

    input.type = "text"; 

    var txtNode = document.createTextNode("Search"); 
    if (typeof txtNode == "object") { 
     searchButton.appendChild(txtNode); 
    } 

    studentSearch.setAttribute("class", "student-search"); 
    input.setAttribute("id", "inputSearch"); 

    //append these elements to the page 
    studentSearch.appendChild(input); 
    studentSearch.appendChild(searchButton); 

    input.placeholder = "Type name here.."; 

    return studentSearch; 
} 

var searchFunction = function searchFeature(searchString) { 
    console.log("Is my search feature working?"); 
    //Get the value entered in the search box 
    var inputString = document.getElementById('inputSearch'); 
    var stringValue = inputString.value; 
    //Onkeyup we want to filter the content by the string entered in the search box 

    inputString.onkeyup = function() { 
      //toUpperCase to make it case insensitive 
     var filter = $(this).val().toUpperCase() 
     //loop through all the lis 
     for (var i = 0; i < eachStudent.length; i++) { 
      //Do this for all the elements (h3, email, joined-details, date) 
      var name = $(eachStudent[i]).find('h3').text() 
     console.log(name, filter, name.toUpperCase().indexOf(filter)) 
      //display all the results where indexOf() does not return -1 
      if (name.toUpperCase().indexOf(filter) != -1) 
       eachStudent[i].style.display = 'list-item'; 
      else 
       eachStudent[i].style.display = 'none'; 
     } 
    } 
} 

function addElements() { 
    console.log('Add search bar, trying to anyway...') 
    pageHeader.appendChild(searchBar()); 
    // page.appendChild(paginationFilter()); 
    onLoad(); 
} 

window.onload = addElements; 
window.onLoad = searchFunction;