検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のとおりです。

本日の結果は次のとおりです。

この場合、重要なポイントが2 つあります。

まず、 CSSを使用してスタイルを表示します

2つ目は、jsを使用して入力コンテンツと配列の内容を比較し、入力コンテンツを含むデータを表示することです。

まず、 CSS 表示スタイルの難しさを見てみましょう。

2 つの div の接触部分をシームレスにするには、 float：left；を設定する必要があります。

2つのdivボックスの左右の丸い境界線については、 border-top-left-radiusなどの値を設定する必要があります。これにより、検索ボックスのスタイルを大まかに把握できます。残りの詳細はコードで確認できます〜

次に、 JS の比較部分を見てみましょう。

一般的な考え方としては、コンテンツを入力すると、一致するデータを表示するために下の検索ボックスが表示されます。入力しなかったり、入力したデータが一致しなかったりすると、データは表示されません。検索ボックスがフォーカスを失うと、下の検索ボックスは消えます。

1. 検索ボックスにコンテンツを入力すると、 onkeyup関数を呼び出して、まず下の検索ボックスの display 属性値を block に設定できます。
次に、 forEachを呼び出して配列内のすべてのデータを走査し、 valueを通じて入力コンテンツを取得し、 indexOfを呼び出してそのコンテンツと配列内のデータを比較します。一致する場合、戻り値は配列内のデータのインデックスになり、それ以外の場合は -1 になります。
一致するものがある場合は、 innerHTMLを使用して下の表示ボックスに p タグを追加できます。p の内容は一致するデータです。一致するものがない場合、「まだデータがありません」という内容の p タグが返されます。

2. 検索ボックスがフォーカスを失った場合、下の検索ボックスの display 属性値を none に設定します。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。容器 {
            幅: 500ピクセル;
            高さ: 160px;
            パディング: 40px;
            マージン: 100px 自動
        }

        ＃1つ {
            幅: 268ピクセル;
            高さ: 33px;
            フロート: 左;
            境界線: 0;
            左上の境界線の半径: 20px;
            左下の境界線の半径: 20px;
            背景色: rgb(245, 246, 247);
            アウトライン: なし;
        }

        ＃検索 {
            背景色: rgb(252, 85, 49);
            色: 白;
            幅: 70ピクセル;
            高さ: 35px;
            行の高さ: 35px;
            テキスト配置: 中央;
            フォントサイズ: 13px;
            境界線の半径: 20px;
            左上の境界線の半径: 0;
            境界線の左下の半径: 0;
            フロート: 左;
        }

        ＃見せる {
            幅: 270ピクセル;
            高さ: 170ピクセル;
            境界線: 1px実線 rgba(77, 76, 76, 0.459);
            表示: なし;
            上マージン: 40px;
            オーバーフロー: 非表示;
        }
        #divを表示{
            幅: 100%;
            高さ: 40px;
            行の高さ: 40px;
            テキストインデント: 1em;
            表示: ブロック;
        }
        #表示div:hover{
            背景色: rgb(240, 240, 245);
            カーソル:ポインタ;
        }
    </スタイル>
</head>

<本文>
    <div class="コンテナ">
        <div id="nav">
            <input type="text" id="one" placeholder="コースを入力してください" autocomplete="on">
            <div id="search">検索</div>
        </div>
        <div id="表示">
            <div></div>
        </div>
    </div>

    <スクリプト>
        let arr = ['ケーキは安い', 'フルーツが食べたい', '2333', 'CSS ブティック コース', '2 人の小さな友達', 'パンが 2 つあります', '一緒に行きましょう', 'バンドの夏', 'いい天気'];
        one = document.getElementById("one"); とします。
        show = document.getElementById("show") とします。

        one.onfocus = 関数（）{
            show.style.display = "ブロック";
            one.style.border = "1px コーラルソリッド"
            one.onkeyup = 関数（）{
                str = '' とします。
                用語をfalseにします。
                arr.forEach((アイテム) => {
                    index = item.indexOf(one.value); とします。
                    if (~インデックス) {
                        時間=true;
                        str+='<div>'+item+'</div>';// str の値は毎回更新されるため、重複を心配する必要はありません}
                })
                //非常に重要 if(one.value=='' || !tem){
                    show.innerHTML='<div>'+'まだ結果はありません'+'</div>';
                }
                それ以外{
                    表示:
                }
            }

        }
        //オブジェクトがフォーカスを失ったときにonblurイベントが発生します one.onblur = function () {
            show.style.display = "なし"
            one.style.border = "1px 透明実線"
            show.innerHTML='';
        }
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: