uniappであいまい検索を実装する方法

モバイル インターネットの発展に伴い、ユーザーの検索、フィルタリング、その他の機能に対する要求はますます高まっています。多くのアプリでは、あいまい検索が不可欠な機能になっています。 uniappであいまい検索を実装するにはどうすればよいですか?この記事では具体的な導入方法を紹介します。

1. uniapp の紹介

Uniapp は、Vue.js フレームワークに基づく開発ツールで、ミニ プログラム、H5、アプリ、WeChat 公開アカウント、Alipay ミニ プログラムなどを同時に開発できます。 . プラットフォーム アプリケーション。 uniappは、クロスプラットフォーム、高効率、使いやすさなどの利点があり、さまざまな機能を実現する優れたパフォーマンスを持っています。

2. あいまい検索の原理

あいまい検索を開発する前に、あいまい検索の原理を理解する必要があります。あいまい検索とは、検索時に入力した文字列が検索結果と完全に一致するとは限りませんが、特定の範囲内の文字列、つまり入力文字列を含む結果と一致することを意味します。たとえば、「大学」を検索したいのですが、「big」または「learn」と入力すると、「university」を含む結果も検索できます。これがあいまい検索の基本原理です。

3. uniapp でのあいまい検索に vue-filter を使用する

1. 実装手順

uniapp では、vue-filter ライブラリを使用して実装できます。あいまい検索検索。具体的な手順は次のとおりです。

1) npm を使用して vue-filter ライブラリをインストールし、次のコマンドを実行します:

npm install vue-filter --save

2) 必要に応じてブラーを使用します。 検索された Vue ファイルに vue-filter を導入します。

import Vue from 'vue'
import VueFilter from 'vue-filter'
Vue.use(VueFilter)

3) テンプレートでフィルターを使用します:

• {{ item }}

4) スクリプトでフィルターを定義します

import Vue from ' vue'
'vue-filter' から VueFilter をインポート
Vue.use(VueFilter)
デフォルトのエクスポート {
data() {

return {
  keyword: '',
  list: ['apple', 'banana', 'orange', 'watermelon'] //示例数据
}

},
計算: {

filteredList() {
  // 使用vue-filter的filterBy方法进行模糊搜索
  return Vue.filter('filterBy')(this.list, this.keyword)
}

}
}

2. 効果を達成する

アプリを実行し、検索する必要があるキーワードを入力ボックスに入力します。 「an」など、「an」～「banana」「orange」を含む文字列のみがリストに表示されていることがわかります。

4. uniapp でのあいまい検索に element-ui を使用する

vue-filter ライブラリに加えて、uniapp は element-ui の使用もサポートしています。 element-ui の el-autocomplete コンポーネントを使用して、あいまい検索を実装することもできます。

1. 実装手順

手順は次のとおりです:

1) element-ui を使用する必要がある vue ファイルに element-ui を導入します。コンポーネント:

import { Autocomplete } from 'element-ui'

2) テンプレートで el-autocomplete コンポーネントを使用します:

v-model=" value"
:fetch-suggestions="querySearchAsync"
placeholder="「中国」を検索してみてください"
@select="handleSelect">
autocomplete>

3) スクリプトで関連メソッドを定義します:

export default{
data() {

return {
  value: '',
  mylist: ['中国', '美国', '日本', '韩国', '英国'] // 示例数据
}

},
メソッド: {

querySearchAsync(queryString, cb) {
  // 筛选含有关键字的字符串
  var links = this.mylist.filter(function(name) {
    return name.indexOf(queryString) > -1
  })
  // 返回结果
  cb(links)
},
handleSelect(item) {
  console.log(item)
}

}
}

2. 効果を達成する

アプリを実行し、検索する必要があるキーワードを入力ボックスに入力します。 「国」を選択すると、ドロップダウン リストには「国」-「中国」を含む文字列のみが表示されます。

5. 概要

この記事では、vue-filter ライブラリと element-ui を使用して uniapp であいまい検索を実装する方法を紹介します。読者は実際のニーズに応じてさまざまなソリューションを選択できます。実際の開発プロセスでは、これら 2 つのソリューションを使用して、あいまい検索に基づいたさまざまな機能を実装できます。

以上がuniappであいまい検索を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。