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 に移動されました

推薦する

Nginx に React プロジェクトをデプロイする方法の例

テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

js は、州、市、地区の 3 段階の選択カスケードを実装します。

この記事では、省、市、地区の3段階選択を実現するためのjsの具体的なコードを紹介します。具体的な内容...

Bツリーの特性の紹介

B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

Windows Server 2016 に MySQL 5.7.19 の解凍バージョンをインストールするための詳細なチュートリアル

MySQL 5.7.19 winx64 解凍版のインストールチュートリアルを収録しています。具体的な...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

Windows7 での Mysql5.7 my.ini ファイルの読み込みパスとデータの場所の変更方法

更新: MySQL の公式 Web サイトにアクセスして MySQL インストーラーをインストールし...

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

Webデザイン講座(4):素材と表現について

<br />前回のWebデザインチュートリアル:Webデザインチュートリアル(3):デザ...