Comment implémenter la recherche floue dans Uniapp

Avec le développement de l'Internet mobile, la demande des utilisateurs en matière de fonctions de recherche, de filtrage et autres est également de plus en plus élevée. Dans de nombreuses applications, la recherche floue est devenue une fonctionnalité indispensable. Comment implémenter la recherche floue dans Uniapp ? Cet article vous présentera la méthode de mise en œuvre détaillée.

1. Introduction à uniapp

uniapp est un outil de développement basé sur le framework Vue.js, qui peut développer simultanément des petits programmes, H5, App, comptes publics WeChat et Alipay petits programmes Applications sur plusieurs plateformes telles que des programmes. uniapp présente les avantages d'être multiplateforme, haute efficacité, facile à utiliser, etc., et a de bonnes performances dans la réalisation de diverses fonctions.

2. Principe de recherche floue

Avant de développer la recherche floue, nous devons comprendre le principe de la recherche floue. La recherche floue signifie que lors de la recherche, la chaîne que nous saisissons ne correspond pas nécessairement exactement aux résultats de la recherche, mais correspond aux chaînes situées dans une plage spécifique, c'est-à-dire aux résultats contenant la chaîne d'entrée. Par exemple, nous souhaitons rechercher « université », mais saisir « grand » ou « apprendre » peut également rechercher des résultats contenant « université ». C'est le principe de base de la recherche floue.

3. Utilisez vue-filter pour une recherche floue dans uniapp

1. Étapes de mise en œuvre

Dans uniapp, nous sommes flous la recherche peut être implémentée à l'aide de la bibliothèque vue-filter. Les étapes spécifiques sont les suivantes :

1) Utilisez npm pour installer la bibliothèque vue-filter et exécutez la commande suivante :

npm install vue-filter --save#🎜 🎜#

2) Introduisez vue-filter dans le fichier vue qui doit utiliser la recherche floue :

import Vue from 'vue'

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

3) Utilisez le filtre dans le modèle :

< ;ul>

{{ item }}

#🎜🎜 #
4) Définir le filtre dans le script

import Vue from 'vue'

import VueFilter from 'vue-filter'

Vue.use(VueFilter)#🎜 🎜#export default {# 🎜🎜# data() {

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

},
calculé : {

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

}}

#🎜 🎜#réaliser l'effet

Exécutez l'application, nous pouvons saisir les mots-clés que nous devons rechercher dans la zone de saisie, comme "un", et nous le ferons voyez que seuls les éléments contenant "un" sont affichés dans les chaînes de la liste - "banane" et "orange".

4. Utilisez element-ui dans uniapp pour une recherche floue
2. En plus de la bibliothèque vue-filter, uniapp prend également en charge l'utilisation d'element-ui. Nous pouvons également utiliser le composant el-autocomplete dans element-ui pour implémenter la recherche floue.

Étapes de mise en œuvre

Les étapes sont les suivantes :

1) Dans le fichier vue qui doit être utilisé le composant element-ui Introduisez element-ui dans :
1. import { Autocomplete } from 'element-ui'

2) Utilisez le composant el-autocomplete dans le modèle : # 🎜🎜##🎜🎜 # v-model="value"

:fetch-suggestions="querySearchAsync"

placeholder="Essayez de rechercher "Chine""# 🎜🎜# @select= "handleSelect">

3) Définir les méthodes associées dans le script :

export default{# 🎜🎜# data( ) {

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

},
méthodes : {

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

}}

#🎜 🎜#réalisez l'effet# 🎜🎜#

Exécutez l'application, nous pouvons saisir les mots-clés à rechercher dans la zone de saisie, tels que "pays", et vous pouvez voir que seules les chaînes contenant "pays" " s'affichent dans la liste déroulante - -"Chine".

5. Résumé

Cet article présente les méthodes d'utilisation de la bibliothèque vue-filter et element-ui pour implémenter la recherche floue dans uniapp. Les lecteurs peuvent choisir différentes méthodes en fonction des besoins réels. . plan. Dans le processus de développement actuel, nous pouvons utiliser ces deux solutions pour implémenter diverses fonctions basées sur la recherche floue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!