WeChatミニプログラムで検索キーワードを強調表示するサンプルコード

WeChatミニプログラムで検索キーワードを強調表示するサンプルコード

1. はじめに

プロジェクトで要件に遭遇したら、データを検索してキーワードを強調表示します。要件を受け取ったら、すぐに作業を開始します。まずはレンダリングをご覧ください。ソースコードは小さなプログラムコードスニペットにまとめられ、GitHub に公開されています。記事の下部にソースコードへのリンクがあります。

2. アイデア

ブロガーが最初に考えたのは、split を使うことでした。検索されたキーワードに応じて、バックグラウンドで返されたデータを処理し、indexOf でキーワードを見つけ、各単語に deep フィールドを追加しました。deep が true の場合は強調表示され、false の場合は通常のままになります。小さなプログラムなので、OP はそれを直接ハイライト コンポーネントにしました。コードは非常にシンプルで、実装手順は次のとおりです。

3. コードロジック

シミュレーションデータは以下のとおりです

リスト:[
 「武漢大学」、
 「華中科技大学」
 「華中師範大学」
 「中南経済法大学」
 「中国地質大学」
 「武漢理工大学」
 「華中農業大学」
 「武漢理工大学」
]、

検索キーでフィルタリングされたデータを格納するために、データに空の配列が定義されます。

filterList:[], //フィルター済み

wxml と検索方法

// wxml
<view class="search_box">
 <input type="text" placeholder="武漢の985/211大学を入力してください" bindinput="searchValue" class="search"/>
</ビュー>

// 検索メソッド searchValue(e){
 val = e.detail.value; とします。
 this.setData({ 値:val })
 長さが0より大きい場合
  this.setData({ フィルターリスト:[] })
  arr = [] とします。
  for(let i = 0;i < this.data.list.length;i++){
   if(this.data.list[i].indexOf(val) > -1){
    arr.push(このデータリスト[i])
   }
  }
  this.setData({ フィルターリスト: arr })
 }それ以外{
  this.setData({ フィルターリスト: [] })
 }
}

ハイライトコンポーネントのハイライトを定義します

"コンポーネントの使用": {
  "ハイライト":"../../components/ハイライト/ハイライト"
 }

ページ内の各項目とキーパラメータをコンポーネントに渡す

<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn">
 <ハイライトテキスト="{{項目}}" キー="{{値}}" />
</ビュー>

コンポーネントで受信

プロパティ:
 テキスト:文字列、
 鍵:{
  タイプ:文字列、
  価値:''、
  オブザーバー:'_changeText'
 }
}

コンポーネントの初期データ

データ: {
 highlightList:[], //処理されたデータ}

コンポーネントのwxml

<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>

コンポーネントハイライトデータ処理

// 空でないfilter_changeText(e){
  e.length > 0 && this.properties.text.indexOf(e) > -1 の場合{
   this._filterHighlight(this.properties.text, e);
  }
 },
 /**
 * キーワードの強調表示* @param { String } text - テキスト* @param { String } key - キーワード*/
 _filterHighlight(テキスト、キー){
  textList を text.split(""); とします。
  keyList を key.split(""); とします。
  リストを [] にします。
  for(let i = 0;i < textList.length;i++){
   obj = {
    深い:偽、
    val:テキストリスト[i]
   }
   リストをプッシュします。
  };
  for(let k = 0; k < keyList.length; k++){
   リスト.forEach(項目 => {
    if(item.val === keyList[k]){
     アイテムの深さを true に設定します。
    }
   })
  }
  this.setData({ ハイライトリスト:リスト })
 }

ソースコードのGitHubアドレス: https://github.com/pdd11997110103/ComponentWarehouse

WeChatミニプログラムで検索キーワードのハイライトを実装するためのサンプルコードに関するこの記事はこれで終わりです。より関連性の高いミニプログラムの検索キーワードのハイライトコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットはカスタムコンポーネントナビゲーションを使用して現在のページを強調表示します
  • WeChatアプレットがグローバル検索コードの強調表示例を実装

<<:  xtrabackup による MySQL データベースのバックアップと復元

>>:  Telnet は Alpine イメージの busybox-extras に移動されました

推薦する

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)

-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...

ショートビデオ(Douyin)の透かし除去ツールの実装コード

目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...

時間別にグループ化された MySQL クエリ ステートメント

年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...

CSS 前景と背景の自動カラーマッチング技術の紹介 (デモ)

1. カラーマッチング効果のプレビュー下の GIF に示すように、ボタンの背景色が徐々に薄くなると...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

mysql update文の実行プロセスの詳細な説明

以前、MySQL クエリ文の実行プロセスについての記事がありました。ここでは、更新文の実行プロセスを...

mysql のインデックスと FROM_UNIXTIME に関する問題

ゼロ、背景今週の木曜日にたくさんのアラートを受け取りました。DBA に確認を依頼したところ、遅いクエ...

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

Fabric.js は DIY ポストカード機能を実装します

この記事では、DIYポストカード機能を実現するためのfabricjsの具体的なコードを参考までに共有...

熟練デザイナーの7つの原則(2):色の使い方

<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...

初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...

JavaScriptはマウスの動きに追従するボックスを実装します

この記事では、マウスの動きを追跡するためのJavaScriptの具体的なコードを参考までに紹介します...

DockerにTensorFlow環境を素早くインストールする方法

Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...