検索履歴を実装するjQueryプラグイン

検索履歴を実装するjQueryプラグイン

毎日jQueryプラグイン - 検索履歴を作成するためのものです。参考までに、具体的な内容は次のとおりです。

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>検索履歴を実行する</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   *{
    マージン: 0px;
    パディング: 0px;
   }
   #検索ボックス{
    /* 境界線: 1px 実線ライトグレー; */
    高さ: 40px;
    幅: 720ピクセル;
    位置: 相対的;
   }
   #検索入力{
    境界線: 1px 実線のライトグレー;
    境界線の半径: 5px 0px 0px 5px;
    高さ: 28px;
    位置: 絶対;
    右: 45px;
    上: 5px;
    左: 5px;
    幅: 670ピクセル;
    アウトライン: なし;
    テキストインデント: 12px;
    フォントサイズ: 12px;
    色: グレー;
   }
   #検索入力:フォーカス{
    境界線の色: rgb(252,25,68);
   }
   #検索入力:フォーカス~#その他のボックス{
    ディスプレイ:フレックス;
   }
   #検索ボタン{
    高さ: 30px;
    幅: 40px;
    境界線: なし;
    境界線の半径: 0px 5px 5px 0px;
    背景色: rgb(252,25,68);
    位置: 絶対;
    右: 5px;
    上: 5px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    カーソル: ポインタ;
   }
   #検索ボタン画像{
    幅: 25px;
    高さ: 25px;
   }
   #モアボックス{
    境界線: 1px 実線のライトグレー;
    位置: 絶対;
    上: 40px;
    左: 5px;
    右: 5px;
    高さ: 370ピクセル;
    zインデックス: 7;
    境界線の半径: 2px;
    ディスプレイ: フレックス;
    表示: なし;
   }
   #押す{
    フレックス: 1;
    /* 境界線: 1px 実線ライトグレー; */
    位置: 相対的;
   }
   #歴史{
    /* 表示: なし; */
    フレックス: 1;
    /* 境界線: 1px 実線ライトグレー; */
    位置: 相対的;
   }
   。頭{
    位置: 絶対;
    上: 0px;
    幅: 100%;
    高さ: 30px;
    border-bottom: 1px 実線ライトグレー;
    フォントサイズ: 12px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    テキストインデント: 12px;
    色: rgb(252,85,49);
   }
   。主要{
    位置: 絶対;
    上: 30px;
    幅: 100%;
    下: 0px;
    オーバーフロー-x:非表示;
    オーバーフロー-y: 自動;
   }
   。アイテム{
    フォントサイズ: 12px;
    高さ: 30px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    テキストインデント: 12px;
    カーソル: ポインタ;
   }
   .item:ホバー{
    背景色: ライトグレー;
   }
  </スタイル>
 </head>
 <本文>
  <div id="検索ボックス">
   <input id="searchinput" placeholder="c下" />
   <button id="searchbtn"><img src="img/sc.png"></button>
   <div id="morebox">
    <div id="履歴">
     <div class="head">検索履歴</div>
     <div class="main"></div>
    </div>
    <div id="push">
     <div class="head">ホットなおすすめ</div>
     <div class="main">
      <div class="item">マイクロソフトがついに JDK に対して措置を講じた</div>
      <div class="item">Xiaomi のワイヤレス充電テクノロジー</div>
      <div class="item">一般的な Linux コマンド</div>
      <div class="item">A Fei は一生懸命働いており、文章を書くのが得意です</div>
      <div class="item">毎日 jQuery プラグインを学習すれば、プラグインは不要になります。それは道徳の低下か、それとも人間性の歪みか?
     </div>
    </div>
   </div>
  </div>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数(){
  //検索をクリックするたびにキャッシュに保存されます//
  $(".item").click(function(){
   var str = $(this).text();
   $("#検索入力").val(str)
  })
   // localStorage["history"] = '[]'//キャッシュをクリアします。
  履歴を描画します。
  $("#searchbtn").click(function(){
   var str = $("#searchinput").val();
   if(str&&str!=""){
    var arr = getSession();
    arr.push(str);
    localStorage["history"] = JSON.stringify(arr);
    履歴を描画します。
   }
  })
  セッションを取得します。
  //キャッシュに基づいて履歴を検索し、検索履歴関数drawhistory(){を生成します
   var arr = getSession();
   $("#history .main .item").remove();
   arr.forEach(item=>{
    var $item = $("<div class='item'>"+item+"</div>");
    $item.appendTo($("#history .main"));
   })
  }
  //キャッシュを取得する関数 getSession(){
   var ses = localStorage["履歴"];
   var arr = ses==undefined?[]:JSON.parse(ses);
   arr を返します。
  }
 })
</スクリプト>

アイデアの説明

1. レイアウトに欠陥があります。私のレイアウトが最も適切かどうかはわかりませんが、見た目は問題ありません。
2. 次に、履歴部分はlocalStorageに保存され、適切なアクションの場所で対応するエフェクトに処理され、DOMに戻されます。

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

以下もご興味があるかもしれません:
  • jQuery ベースの Baidu 検索ボックス効果コード
  • jQueryをベースにした自動検索キーワードマッチング機能を実装

<<:  Linuxでポートが開いているかどうかを確認する方法のまとめ

>>:  MySQL 5.6 のインストール手順(画像とテキスト付き)

推薦する

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

MySQL の日付フォーマットと複雑な日付範囲クエリ

目次序文クエリの使用シナリオ例時間間隔クエリクエリ日付と今日の時間の比較データ一般的なサイクルタイム...

Docker データ ストレージ tmpfs マウントの詳細な説明

この記事を読む前に、ボリュームとバインドマウントの基本を理解しておいてください。詳細については、次の...

Web ページは何ピクセルで設計すればよいでしょうか?

多くのウェブデザイナーは、ウェブページのレイアウトを設計する際に、インターフェースウェブページの幅に...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション

<br />適度に画像を追加すると、Web ページがより美しくなります。 画像タグ &l...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...

Tomcatアーキテクチャの原則をアーキテクチャ設計に分析する

目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...