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

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

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

// 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:[], //処理されたデータ}

<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({ ハイライトリスト:リスト })
 }