検索データ表示を実装する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 を応援していただければ幸いです。

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

テーブルデータ検索を実装するjs
JavaScript による JSON データの並べ替えと検索
テーブルデータのさまざまな検索機能を実現するJSメソッド

<<: 両側にCSS固定レイアウト、中央に適応レイアウトを実装

>>: docker コンペ応募でよく使われるコマンドのまとめ

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

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

デザイナーはコーディングを学ぶ必要がありますか?

nginx proxy_pass 設定で URL が / で終わる場合と / なしで終わる場合の違いの詳細な説明

フローティングカスタマーサービス効果を実現するCSS

JavaScript のシングルトンデザインパターン

CSS で div にスクロールを追加し、スクロールバーを非表示にする

サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法

MySQL Shell import_tableデータインポートの実装

推薦する

MySQL に絵文字を保存するときに表示されるエラーメッセージ「java.sql.SQLException: 文字列値が正しくありません:'\xF0\x9F\x92\xA9\x0D\x0A...'」の解決方法

Dockerコンテナ内にkibanaトークナイザーをインストールする方法

印刷広告を成功させるための「3I」基準

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)

html-webpack-plugin の使用方法の詳細な説明

CSSのtranslate(-50%,-50%)は水平および垂直の中央揃え効果を実現します。

Linux sftp コマンドの使用法

tdが空の場合に境界線を表示する方法

jQueryはシンプルなコメントエリアを実装します

Vueは複数の画像の追加、表示、削除を実装します

Dockerを使用してDjango+MySQL8開発環境をデプロイする方法の詳細な説明

よく使われる3つのMySQLデータ型

MySQL トランザクション同時実行問題の解決

よく使われるCSSスタイル（レイアウト）の詳しい説明