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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

小云云

May 23, 2018 pm 04:42 PM

jquery 関数見せる

この記事では主に、プロジェクトで頻繁に使用されるフロントエンド 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 全体を読み込みページに戻さないと、検索でバグが発生します。

このように、b タグを削除して Wayao Village と Village Committee を検索すると、明らかにさらに 2 つの b タグがあります

、赤色で表示されません。

4. 私が学んだ主なテクニック: タグを削除し、関連するテキストをすべて置き換える方法、必要な p (フィルター) フィルター方法を表示します。

要約: これら以外にも多くの問題があります。インターネット上で多くの情報を調べましたが、紙で見つけたものは常に、さまざまなアイデアでさまざまなバグを解決しました。これは非常に基本的なものです。 Baidu を知らない場合は、1 つずつクリックしてください。一日一日ゆっくり前に進んでいきましょう！

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7700

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

Doubaoアプリにはどのような機能がありますか? Mar 01, 2024 pm 10:04 PM

DoubaoアプリにはAI作成機能がたくさんあると思いますが、Doubaoアプリにはどのような機能があるのでしょうか？ユーザーはこのソフトウェアを使用して、絵画を作成したり、AI とチャットしたり、ユーザー向けの記事を生成したり、全員が曲を検索できるようにしたりすることができます。今回のDoubaoアプリの機能紹介では、具体的な操作方法をお伝えすることができますので、具体的な内容は以下の通りですので、ぜひご覧ください！ Doubao アプリにはどのような機能がありますか? 回答: 絵を描いたり、チャットしたり、記事を書いたり、曲を検索したりできます。機能紹介: 1. 質問クエリ: AI を使用して質問に対する回答をより迅速に見つけることができ、あらゆる種類の質問をすることができます。 2. 画像生成: AI を使用して、一般的な要件を全員に伝えるだけで、全員に異なる画像を作成できます。 3. AIチャット：ユーザーのためにチャットできるAIを作成できます。

vivox100sとx100の違い：性能比較と機能分析 Mar 23, 2024 pm 10:27 PM

vivox100s と x100 携帯電話はどちらも vivo の携帯電話製品ラインの代表的なモデルであり、それぞれ異なる時代における vivo のハイエンド技術レベルを代表するものであるため、2 つの携帯電話にはデザイン、性能、機能に一定の違いがあります。この記事では、消費者が自分に合った携帯電話をより適切に選択できるように、これら 2 つの携帯電話を性能比較と機能分析の観点から詳しく比較します。まずはvivox100sとx100の性能比較を見てみましょう。 vivox100s には最新の機能が搭載されています。

セルフメディアとは一体何でしょうか？その主な特徴と機能は何ですか? Mar 21, 2024 pm 08:21 PM

インターネットの急速な発展に伴い、セルフメディアという概念が人々の心に深く根付いてきました。では、セルフメディアとは一体何でしょうか？その主な特徴と機能は何ですか?次に、これらの問題を 1 つずつ検討していきます。 1. セルフメディアとは何ですか? We-media は、その名前が示すように、あなたがメディアであることを意味します。これは、個人またはチームがインターネットプラットフォームを通じてコンテンツを独自に作成、編集、公開、配布できる情報媒体を指します。新聞、テレビ、ラジオなどの従来のメディアとは異なり、セルフメディアはよりインタラクティブでパーソナライズされており、誰もが情報の制作者および発信者になることができます。 2. セルフメディアの主な特徴と機能は何ですか? 1. 敷居が低い: セルフメディアの台頭により、メディア業界への参入の敷居が低くなり、煩わしい機材や専門チームは必要なくなりました。

小紅書アカウント管理ソフトウェアの機能は何ですか?小紅書アカウントを操作するにはどうすればよいですか? Mar 21, 2024 pm 04:16 PM

小紅書が若者の間で人気になるにつれ、ますます多くの人がこのプラットフォームを使用して、自分の経験や人生の洞察のさまざまな側面を共有し始めています。複数の小紅書アカウントを効果的に管理する方法が重要な問題となっています。この記事では、Xiaohongshu アカウント管理ソフトウェアの機能のいくつかについて説明し、Xiaohongshu アカウントをより適切に管理する方法を探ります。ソーシャルメディアが成長するにつれて、多くの人が複数のソーシャルアカウントを管理する必要があることに気づきます。これは小紅書ユーザーにとっても課題です。小紅書アカウント管理ソフトウェアの中には、コンテンツの自動公開、スケジュールされた公開、データ分析、その他の機能など、ユーザーが複数のアカウントをより簡単に管理できるようにするものがあります。これらのツールを通じて、ユーザーはアカウントをより効率的に管理し、アカウントの露出と注目を高めることができます。さらに、Xiaohongshu アカウント管理ソフトウェアには、

PHP のヒント: 前のページに戻る関数をすばやく実装する Mar 09, 2024 am 08:21 AM

PHP のヒント: 前のページに戻る機能をすばやく実装する Web 開発では、前のページに戻る機能を実装する必要があることがよくあります。このような操作により、ユーザーエクスペリエンスが向上し、Web ページ間の移動が容易になります。 PHP では、いくつかの簡単なコードを通じてこの機能を実現できます。この記事では、前のページに戻る機能を素早く実装する方法と、具体的な PHP コード例を紹介します。 PHP では、$_SERVER['HTTP_REFERER'] を使用して前のページの URL を取得できます。

ディスカスとは何ですか？ Discuzの定義と機能紹介 Mar 03, 2024 am 10:33 AM

「Discuz の探索: 定義、機能、およびコード例」インターネットの急速な発展に伴い、コミュニティフォーラムは人々が情報を取得し、意見を交換するための重要なプラットフォームになりました。多くのコミュニティフォーラムシステムの中でも、Discuz は中国でよく知られたオープンソースフォーラムソフトウェアとして、大多数の Web サイト開発者や管理者に好まれています。それで、ディスカスとは何ですか？どのような機能があり、Web サイトにどのように役立つのでしょうか?この記事では、Discuz について詳しく紹介し、読者がDiscuz についてさらに学ぶのに役立つ具体的なコード例を添付します。

LinuxにおけるGDMの機能と機能を詳しく解説 Mar 01, 2024 pm 04:18 PM

Linux での GDM の機能と機能の詳細な説明 Linux オペレーティングシステムでは、GDM (GNOMEDisplayManager) は、ユーザーがシステムにログインおよびログアウトするためのインターフェイスを提供するグラフィカルログインマネージャーです。 GDM は通常、GNOME デスクトップ環境の一部ですが、他のデスクトップ環境でも使用できます。 GDM の役割は、ログインインターフェイスを提供するだけでなく、ユーザーセッション管理、スクリーンセーバー、自動ログイン、その他の機能も含まれます。 GDM の機能には主に次の側面が含まれます。

PHP は何に使われますか? PHP の役割と機能を調べる Mar 24, 2024 am 11:39 AM

PHP は、Web 開発で広く使用されているサーバー側スクリプト言語です。その主な機能は、動的な Web コンテンツを生成することです。HTML と組み合わせると、リッチでカラフルな Web ページを作成できます。 PHP は強力で、さまざまなデータベース操作、ファイル操作、フォーム処理、その他のタスクを実行でき、Web サイトに強力な対話性と機能を提供します。次の記事では、詳細なコード例を使用して、PHP の役割と機能をさらに詳しく説明します。まず、PHP の一般的な使用法である動的な Web ページの生成を見てみましょう: P

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック