データが見つからない場合のメッセージ付きHTMLリストフィルタ

私は初心者で、HTMLリストのフィルタリングについて質問したいと思っています。データが見つからない場合のメッセージ付きHTMLリストフィルタ

私は

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_filters_list

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<body> 

<div class="w3-container"> 
    <h2>Filter List</h2> 
    <p>Search for a name in the input field.</p> 

    <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()"> 
    <ul class="w3-ul w3-margin-top" id="myUL"> 
    <li>Adele</li> 
    <li>Agnes</li> 
    <li>Billy</li> 
    <li>Bob</li> 
    <li>Calvin</li> 
    <li>Christina</li> 
    <li>Cindy</li> 
    </ul> 
</div> 

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

</body> 
</html>

からこのスクリプトを見つけた私は、結果が見つからない場合はlike thisを 'データが見つからない' のようなメッセージを追加します。

これを行う方法？おかげさまで私の悪い英語を申し訳ありません。

出典

2017-11-08 Wahid Isna

別途を追加divを表示しての結果が見つかりません。デフォルトでは、この要素は非表示になっています。

結果が見つかりません別の関数を作成します。代わりにliにインラインスタイルを追加することで、クラスhideElement

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
    if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     li[i].classList.remove('hideElement'); 
 
    } else { 
 
     li[i].classList.add('hideElement'); 
 
    } 
 
    } 
 
    // Calling function to decide if no result div need to be shown or not 
 
    // passing the total `li` element.Ideally this should be total li 
 
    // which are child of ul in consideration 
 
    displayNoResult(li.length) 
 
} 
 

 
function displayNoResult(allLI) { 
 
    // get all the li which have hideElement as class 
 
    // if this is equal to the number of li that infers that all li are 
 
    // having hideElement class, which also infers that there is no matched 
 
    // result. In that case so the div for no result 
 
    var hiddenLILength = document.querySelectorAll('li.hideElement'); 
 
    if (allLI === hiddenLILength.length) { 
 
    document.getElementById('noResult').classList.remove('hideElement') 
 
    } else { 
 
    document.getElementById('noResult').classList.add('hideElement') 
 
    } 
 
}

.hideElement { 
 
    display: none; 
 
}

<h2>Filter List</h2> 
 
<p>Search for a name in the input field.</p> 
 

 
<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()"> 
 
<ul class="w3-ul w3-margin-top" id="myUL"> 
 
    <li>Adele</li> 
 
    <li>Agnes</li> 
 
    <li>Billy</li> 
 
    <li>Bob</li> 
 
    <li>Calvin</li> 
 
    <li>Christina</li> 
 
    <li>Cindy</li> 
 
</ul> 
 
<div class="hideElement" id="noResult"> 
 
    Result not found 
 
</div> 
 
</div>

を経由してそれを追加

出典

2017-11-08 04:24:00 brk

まず、データが見つからない場合には、まずそのことを知る必要があります。

ループの前に変数isFound = falseを宣言します。メッセージが見つかるたびにそれをtrueに設定してください。

次に、内容がData not foundのdivを宣言し、他のリストアイテムと同様にループの後に切り替えます。

出典

2017-11-08 03:50:23

データが見つからない場合のメッセージ付きHTMLリストフィルタ

答えて

関連する問題