jQueryは検索機能を実装し、検索関連コンテンツを表示します-jsチュートリアル-php.cn

jQueryは検索機能を実装し、検索関連コンテンツを表示します

小云云

リリース： 2018-05-23 16:42:15

オリジナル

4080 人が閲覧しました

この記事では主に、プロジェクトで頻繁に使用されるフロントエンド HTML の jQuery を紹介します。必要な方は参考にしてください。それがみんなを助けることができることを願っています。

顧客情報を表示した後、関連する顧客情報をすべて検索して表示する必要がある。と表示されている場合は、p全体を表示します。まず効果を見てみましょう:

Wayao Village に入ると、Wayao Village に関連する顧客情報が表示され、Wayao Village のフォントが赤に設定され、その他は表示されません。以下の HTML コード:

<body>
 <p class="bar bar-header-secondary" style="top:0">
  <p class="searchbar">
   <a class="searchbar-cancel">取消</a>
   <p class="search-input">
    <label class="icon icon-search" for="search"></label>
    <input type="text" id="txtSearch" onChange="txtSearch()" placeholder="输入关键字...">
   </p>
  </p>
 </p>
 <p class="content" id="pMain" style="top:2.2em">
  <p class="card">
   <p class="card-header"><p>富民青泉假有限公司</p> <span>530124210342</span></p>
   <p class="card-content">
    <p class="card-content-inner">
     客户经理:卢燕洲<br>
     负责人:张仕城 <a href="tel:13187876969" rel="external nofollow" >12345698711</a>
     <br>
     地址:富民县东村镇乐在村委会乐在村张仕城
     <br>
     客户分档:二档
    </p>
   </p>
  </p>
　　　　后面有n个<p class="card">这里就不重复了
　　　　</p>
</body>

ログイン後にコピー

ここで使用しているのは、個人のニーズに応じて変更できる onChange イベントです

 <style type="text/css">
  .changestyle{color:red;font-weight:600;}
 </style>
 <script type="text/javascript">
  function txtSearch()
  {
   //遍历移除b标签，防止第二次搜索bug
   $(".changestyle").each(function()
   {
     var xx=$(this).html(); 
     $(this).replaceWith(xx);
    });
   //整个客户信息p
   var str=$("#pMain").html();
   //文本输入框
   var txt=$("#txtSearch").val();
   //不为空
   if($.trim(txt)!="")
   {
    //定义b标签样式红色加粗
    var re="<b class=&#39;changestyle&#39;>"+txt+"</b>";
    //替换搜索相关的所有内容
    var nn=str.replace( new RegExp(txt,"gm"),re);
    //赋值
    // document.getElementById("pMain").innerHTML=nn;
    $("#pMain").html(nn);
    //显示搜索内容相关的p
   $(".card").hide().filter(":contains(&#39;"+txt+"&#39;)").show(); 
   }
   else
   {
   $(".card").show();
   }
  }
 </script>

ログイン後にコピー

実際、全体的なアイデアは次のとおりです:

1. まずコンテンツを検索します。 HTML 内で検索して見つけたい場合は、すべてを "+searched content+" に置き換えます。changestyle のスタイルは赤で太字になります

2. 次に、p を表示します。 content$ (".card").hide().filter(":contains('"+txt+"')").show(); カード全体が顧客情報を含みます

3. 全員これが変更されたことを知っています p の元の構造では、内部の spring テキストがこのようになりました。2 回目の入力時に p 全体を読み込みページに戻さないと、検索でバグが発生します。