WeChat アプレットを使用して検索ボックスの自動補完機能を実現する

WeChat アプレットを使用して検索ボックスの自動補完機能を実現する

モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。小規模なプログラムでは、検索機能は非常に一般的な要件の 1 つです。ユーザーエクスペリエンスを向上させるには、検索ボックスのオートコンプリート機能が便利です。この記事では、WeChat アプレットを使用して検索ボックスの自動補完機能を実装する方法と、具体的なコード例を紹介します。

まず、ユーザーが検索キーワードを入力できるように、ミニ プログラム ページに検索ボックス コンポーネントを追加する必要があります。 wxml ファイルでは、入力コンポーネントを使用して検索ボックスを実装できます。

<view class="search-bar">
  <!-- 搜索图标 -->
  <image src="/images/search.png" mode="aspectFit"></image>
  <!-- 搜索输入框 -->
  <input class="input-box" placeholder="请输入关键词" bindinput="onInput" bindconfirm="onConfirm"></input>
</view>

このコードでは、画像コンポーネントを使用して検索アイコンを表示し、入力コンポーネントを使用して検索ボックスを実装します。このうち、bininput 属性と bindingconfirm 属性は、それぞれユーザー入力イベントとユーザー確認検索イベントのハンドラー関数にバインドされています。

次に、対応するイベント処理関数を対応する js ファイルに記述する必要があります。 1 つ目はユーザー入力イベント処理関数 onInput:

Page({
  data: {
    suggestions: []
  },
  onInput: function(event) {
    const value = event.detail.value;
    // 在此处发送搜索建议请求并更新 suggestions 数据
    this.setData({
      suggestions: suggestions // 替换为具体的搜索建议数据
    });
  }
})

このコードでは、event.detail.value を通じてユーザーが入力したキーワードを取得し、ここで検索候補リクエストを送信し、候補データを更新します。 。ここでの候補データは、検索候補結果を保存するために使用される配列です。

次は、ユーザー確認検索イベント処理関数 onconfirm:

Page({
  data: {
    suggestions: []
  },
  onConfirm: function(event) {
    const value = event.detail.value;
    // 在此处进行搜索请求并跳转到搜索结果页
    wx.navigateTo({
      url: '/pages/searchResult/searchResult?keyword=' + value
    });
  }
})

このコードでは、event.detail.value を通じてユーザーが入力したキーワードを取得し、ここに追加します。検索結果ページ。 searchResult は自分で作成する必要がある検索結果ページであり、自分のニーズに応じてカスタマイズできます。

最後に、対応する wxss ファイルで検索ボックスと検索結果のスタイルを設定する必要があります:

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}

.input-box {
  flex: 1;
  margin-left: 10px;
  border: none;
  background-color: transparent;
  font-size: 16px;
  color: #333333;
}

このコードでは、検索ボックスと検索結果に基本的な変更を加えました。 . スタイル設定では、必要に応じてスタイルを調整できます。

上記の手順により、簡単な WeChat アプレット検索ボックスのオートコンプリート機能を実装できます。ユーザーがキーワードを入力すると、ミニプログラムは検索候補を取得するリクエストを送信し、リアルタイムで候補データを更新し、同時にユーザーが検索を確認すると、ミニプログラムは検索結果ページにジャンプし、それにキーワードを渡します。このようなユーザーエクスペリエンスは、ユーザーの検索効率と利便性を大幅に向上させます。この記事が皆さんのお役に立てば幸いです!

以上がWeChat アプレットを使用して検索ボックスの自動補完機能を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。