結果のためのJavascriptの一致/検索テーブル - 合計初心者

私は間違いなく非常に経験は浅いですが、私は自分の会社のワークフローを強化しようとしています。私はhereのコードを使用して、現在の部品番号を検索する内部サイトを作成しています。私の従業員は説明で検索していますが、この例に含まれているjavascriptは個々の単語の代わりに正確な入力で検索します。結果のためのJavascriptの一致/検索テーブル - 合計初心者

たとえば、サイト上のサンプルコードを使用して、「Trading Island」の検索を「Island Trading」と同じ結果に戻したいとします。私はこれが可能であることを知っていますが、それを動作させる方法を理解することはできません。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
* { 
    box-sizing: border-box; 
} 

#myInput { 
    background-image: url('/css/searchicon.png'); 
    background-position: 10px 10px; 
    background-repeat: no-repeat; 
    width: 100%; 
    font-size: 16px; 
    padding: 12px 20px 12px 40px; 
    border: 1px solid #ddd; 
    margin-bottom: 12px; 
} 

#myTable { 
    border-collapse: collapse; 
    width: 100%; 
    border: 1px solid #ddd; 
    font-size: 18px; 
} 

#myTable th, #myTable td { 
    text-align: left; 
    padding: 12px; 
} 

#myTable tr { 
    border-bottom: 1px solid #ddd; 
} 

#myTable tr.header, #myTable tr:hover { 
    background-color: #f1f1f1; 
} 
</style> 
</head> 
<body> 

<h2>My Customers</h2> 

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 

<table id="myTable"> 
    <tr class="header"> 
    <th style="width:60%;">Name</th> 
    <th style="width:40%;">Country</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Berglunds snabbkop</td> 
    <td>Sweden</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Koniglich Essen</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Laughing Bacchus Winecellars</td> 
    <td>Canada</td> 
    </tr> 
    <tr> 
    <td>Magazzini Alimentari Riuniti</td> 
    <td>Italy</td> 
    </tr> 
    <tr> 
    <td>North/South</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Paris specialites</td> 
    <td>France</td> 
    </tr> 
</table> 

<script> 
function myFunction() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    }  
    } 
} 
</script> 

</body> 
</html>

出典

2016-12-12 Matthew Flanigan

私たちはあなたのテーブルのセルのコンテンツに対するワード検索を行うために、私はちょうど私の答えを更新しました（と、それを簡素化）しました – Ted

@MatthewFlaniganを助けるためにいくつかのコードを参照するつもり必要です。入力された単語の順序は重要ではありません。今のところ、セル内のすべての単語を一致するために検索に入力する必要がありますが、コメントを読むと、入力された検索語の一部のみを変更する必要があることがわかります見つかるセルの一致。 –

単語の一致を検索する場合、それが配列に検索される配列とセルの内容に検索文字列を配置するのが最善です。

は、その後、あなたは簡単に検索語の全部または一部が細胞内に存在しているかどうかを確認するためにArray.prototype.every()またはArray.prototype.some()メソッドを使用することができます。

詳細については、下記の私のコメントを参照してください。

// Get a reference to the input 
 
var searchElement = document.getElementById("myInput"); 
 

 
// Hook element up to event handler: 
 
searchElement.addEventListener("keyup", search); 
 

 
// Event handler: 
 
function search(){ 
 

 
    // Now, break the search input into an array of words by splitting the string where 
 
    // there are spaces (regular expression used here to locate the strings). 
 
    // Also, note that strings are case-sensitive, so we are taking the input and 
 
    // forcing it to lower case and we'll match by lower case later. 
 
    var searchWords = searchElement.value.toLowerCase().split(/\s+/); 
 

 
    // Test to see the individual words 
 
    //console.clear(); 
 
    //console.log(searchWords); 
 

 
    // Now you have to have some content to search against. 
 
    // So, we'll get all the cells, which will be our data source: 
 
    var theCells = document.querySelectorAll("td"); 
 

 
    // Loop over each cell 
 
    theCells.forEach(function(cell){ 
 
    // Reset any previous cell matches 
 
    cell.style.backgroundColor = "inherit"; 
 
    
 
    // Get the words in the cell as an array (note: we are forcing lower 
 
    // case again here to match lower case against lower case 
 
    var cellWords = cell.textContent.toLowerCase().split(/\s+/); 
 

 
    // See if the cell contains all of the search words (You can substitute 
 
    // "some" for "every" to just see if the cell contains some of the search words 
 
    var result = cellWords.every(elem => searchWords.indexOf(elem) > -1); 
 
    
 
    // every and some return a boolean letting you know if your condition was met: 
 
    if(result){ 
 
     console.clear(); 
 
     console.log("Match found in: " + cell.textContent); 
 
     cell.style.backgroundColor = "#ff0"; 
 
    } 
 
    
 
    }); 
 
    
 
}

<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> 
 

 
<table id="myTable"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>

出典

2016-12-12 21:36:19

結果のためのJavascriptの一致/検索テーブル - 合計初心者

答えて

関連する問題