同じサイトでテキスト入力にキーワードを入力したいので、jQueryを使用してテーブル行を介してライブ検索を行い、「ライブ」Wordがキーになります。jQueryを自動的にソートしたい(または、検索クエリに一致しない人を削除します)、テーブルの行。
これが私のHTMLです。
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>1252512</td><td>556</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>3245466</td><td>334</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
そして、もし私がfeなら。 Unique ID
で検索すると、一意のIDの特定の番号から始まる行のみが表示されます。フェ検索入力ボックスに「2」と入力すると、次の行は2
で始まるため、そのまま残ります。
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>214215</td><td>442</td></tr>
<tr><td>2114</td><td>4666</td></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
24
と入力すると、24
から始まる行が1行だけ表示されます。
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
このようなことをするためのヒントを教えていただければ、とてもありがたいです。
ありがとうございました。
これがどれほど効率的かはわかりませんが、これは機能します:
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index != 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) != 0) {
$(this).hide();
}
else {
$(this).show();
}
}
});
});
あなたや将来のユーザーが便利だと思うかもしれない単純な強調ロジックをいくつか追加しました。
基本的な強調表示を追加する方法の1つは、一致したテキストの周りにem
タグをラップし、CSSを使用して一致したテキストに黄色の背景を適用することです。つまり、(em{ background-color: yellow }
)、これに類似:
// removes highlighting by replacing each em tag within the specified elements with it's content
function removeHighlighting(highlightedElements){
highlightedElements.each(function(){
var element = $(this);
element.replaceWith(element.html());
})
}
// add highlighting by wrapping the matched text into an em tag, replacing the current elements, html value with it
function addHighlighting(element, textToHighlight){
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight, highlightedText);
element.html(newText);
}
$("#search").on("keyup", function() {
var value = $(this).val();
// remove all highlighted text passing all em tags
removeHighlighting($("table tr em"));
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find("td:first");
var id = $tdElement.text();
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
//highlight matching text, passing element and matched text
addHighlighting($tdElement, value);
$row.show();
}
}
});
});
Demo -簡単な強調表示を適用する
以下は両方の列を検索するバージョンです。
$("#search").keyup(function () {
var value = this.value.toLowerCase().trim();
$("table tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
FrançoisWahlアプローチ 、ただし少し短い:
$("#search").keyup(function() {
var value = this.value;
$("table").find("tr").each(function(index) {
if (!index) return;
var id = $(this).find("td").first().text();
$(this).toggle(id.indexOf(value) !== -1);
});
});
私はyckartの答えを取りました:
(スクリプトをjQueryインクルードの下のページの下部に配置する場合、ドキュメントを準備する必要はありません)
jQuery:
<script>
$(".card-table-search").keyup(function() {
var value = this.value.toLowerCase().trim();
$(".card-table").find("tr").each(function(index) {
var id = $(this).find("td").first().text().toLowerCase().trim();
$(this).toggle(id.indexOf(value) !== -1);
});
});
</script>
これを拡張する場合は、各「td」を反復処理して、この比較を実行します。
すべての列のライブ検索を使用した純粋なJavaScriptバージョンです。
function search_table(){
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_field_input");
filter = input.value.toUpperCase();
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td") ;
for(j=0 ; j<td.length ; j++)
{
let tdata = td[j] ;
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break ;
} else {
tr[i].style.display = "none";
}
}
}
}
}
古い質問ですが、私はそれをより速くする方法を見つけます。私の例では、テーブルに約10,000個のデータがあるため、高速な検索マシンが必要です。
ここに私がやったことがあります:
$('input[name="search"]').on('keyup', function() {
var input, filter, tr, td, i;
input = $(this);
filter = input.val().toUpperCase();
tr = $("table tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // <-- change number if you want other column to search
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
})
それが誰かを助けることを願っています。
yckart's answer を使用して、テーブル全体-すべてのtdを検索しました。
$("#search").keyup(function() {
var value = this.value;
$("table").find("tr").each(function(index) {
if (index === 0) return;
var if_td_has = false; //boolean value to track if td had the entered key
$(this).find('td').each(function () {
if_td_has = if_td_has || $(this).text().indexOf(value) !== -1; //Check if td's text matches key and then use OR to check it for all td's
});
$(this).toggle(if_td_has);
});
});
以前の回答を使用し、それらを組み合わせて作成します。
ハイライトされたテキストのCss:
em {
background-color: yellow
}
Js:
function removeHighlighting(highlightedElements) {
highlightedElements.each(function() {
var element = $(this);
element.replaceWith(element.html());
})
}
function addHighlighting(element, textToHighlight) {
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight, highlightedText);
element.html(newText);
}
$("#search").keyup(function() {
var value = this.value.toLowerCase().trim();
removeHighlighting($("table tr em"));
$("table tr").each(function(index) {
if (!index) return;
$(this).find("td").each(function() {
var id = $(this).text().toLowerCase().trim();
var matchedIndex = id.indexOf(value);
if (matchedIndex === 0) {
addHighlighting($(this), value);
}
var not_found = (matchedIndex == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
デモここ
行内のセルに検索されたフレーズまたは単語が含まれている場合、この関数はそれ以外の行を非表示にします。
<input type="text" class="search-table"/>
$(document).on("keyup",".search-table", function () {
var value = $(this).val();
$("table tr").each(function (index) {
$row = $(this);
$row.show();
if (index !== 0 && value) {
var found = false;
$row.find("td").each(function () {
var cell = $(this).text();
if (cell.indexOf(value.toLowerCase()) >= 0) {
found = true;
return;
}
});
if (found === true) {
$row.show();
}
else {
$row.hide();
}
}
});
});
JS関数の下で、指定された列に基づいて行をフィルタリングするために使用できます。searchColumn配列を参照してください。これはw3スクールから取得され、特定の列のリストで検索およびフィルタリングするように少しカスタマイズされています。
HTML構造
<input style="float: right" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in a name">
<table id ="myTable">
<thead class="head">
<tr>
<th>COL 1</th>
<th>CoL 2</th>
<th>COL 3</th>
<th>COL 4</th>
<th>COL 5</th>
<th>COL 6</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</tbody>
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");
var searchColumn=[0,1,3,4]
for (i = 0; i < tr.length; i++) {
if($(tr[i]).parent().attr('class')=='head')
{
continue;
}
var found = false;
for(var k=0;k<searchColumn.length;k++){
td = tr[i].getElementsByTagName("td")[searchColumn[k]];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
found=true;
}
}
}
if(found==true) {
tr[i].style.display = "";
}
else{
tr[i].style.display = "none";
}
}
}
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
仮定は、tbodyを持つ1つのテーブルがあります。また、findで検索することも、テーブルにIDがある場合は、idを使用することもできます
これは私の場合に最適です
https://www.w3schools.com/jquery/jquery_filters.asp
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Ajax、PHPおよびJQueryを使用してできることを次に示します。これが助けになるか、開始できることを願っています。phpでmysqlクエリを確認します。最初から始まるパターンに一致します。
ライブデモとソースコードはこちらをご覧ください。
http://purpledesign.in/blog/to-create-a-live-search-like-google/
検索ボックスを作成します。このような入力フィールドの場合があります。
<input type="text" id="search" autocomplete="off">
次に、ユーザーがテキスト領域で入力した内容を聞く必要があります。このために、jquery live()とkeyupイベントを使用します。キーアップごとに、phpスクリプトを実行するjquery関数「search」があります。
このようなhtmlがあるとします。入力フィールドと結果を表示するリストがあります。
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<ul id="results"></ul>
入力フィールドのキーアップイベントをリッスンするJqueryスクリプトがあり、空でない場合はsearch()関数を呼び出します。 search()関数はphpスクリプトを実行し、AJAXを使用して同じページに結果を表示します。
これがJQueryです。
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
//Listen for the event
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search_st.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
}); PHPで、mysqlデータベースにクエリを送信します。 phpは、AJAXを使用してhtmlに配置される結果を返します。ここで、結果はhtmlリストに入れられます。
2つの類似した列名「type」と「desc」を持つ2つのテーブルanimalとbirdを含むダミーデータベースがあるとします。
//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";
// Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
// Check Connection
if ($tutorial_db->connect_errno) {
printf("Connect failed: %s\n", $tutorial_db->connect_error);
exit();
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$query = "SELECT *
FROM animals
WHERE type REGEXP '^".$search_string."'
UNION ALL SELECT *
FROM birf
WHERE type REGEXP '^".$search_string."'"
;
$result = $tutorial_db->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}
// Check If We Have Results
if (isset($result_array)) {
foreach ($result_array as $result) {
// Format Output Strings And Hightlight Matches
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
$display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';
// Insert Name
$output = str_replace('nameString', $display_name, $html);
// Insert Description
$output = str_replace('functionString', $display_function, $output);
// Insert URL
$output = str_replace('urlString', $display_url, $output);
// Output
echo($output);
}
}else{
// Format No Results Output
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No Results Found.</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
// Output
echo($output);
}
}