How to implement fuzzy search in uniapp

With the development of mobile Internet, users have higher and higher demands for search, filtering and other functions. In many apps, fuzzy search has become an indispensable feature. How to implement fuzzy search in uniapp? This article will introduce you to the detailed implementation method.

1. Introduction to uniapp

Uniapp is a development tool based on the Vue.js framework, which can simultaneously develop mini programs, H5, App, WeChat public accounts and Alipay mini programs, etc. Platform applications. uniapp has the advantages of cross-platform, high efficiency, easy to use, etc., and has good performance in realizing various functions.

2. Principle of fuzzy search

Before developing fuzzy search, we need to understand the principle of fuzzy search. Fuzzy search means that when searching, the string we enter does not necessarily exactly match the search results, but matches strings within a specific range, that is, results that contain the input string. For example, we want to search for "university", but entering "big" or "learn" can also search for results containing "university". This is the basic principle of fuzzy search.

3. Use vue-filter for fuzzy search in uniapp

1. Implementation steps

In uniapp, we can use the vue-filter library to implement fuzzy search search. The specific steps are as follows:

1) Use npm to install the vue-filter library and run the following command:

npm install vue-filter --save

2) Use blur when needed Introduce vue-filter into the searched vue file:

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

3) Use filters in templates:

• {{ item }}

4) Define the filter in script

import Vue from 'vue'
import VueFilter from 'vue-filter'
Vue.use(VueFilter)
export default {
data() {

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

},
computed: {

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

}
}

2. Achieve the effect

Run the app, we can enter the keywords we need to search in the input box, such as "an", You can see that the list only displays strings containing "an" - "banana" and "orange".

4. Use element-ui for fuzzy search in uniapp

In addition to the vue-filter library, uniapp also supports the use of element-ui. We can also use the el-autocomplete component in element-ui to implement fuzzy search.

1. Implementation steps

The steps are as follows:

1) Introduce element-ui into the vue file that needs to use the element-ui component:

import { Autocomplete } from 'element-ui'

2) Use the el-autocomplete component in the template:

v-model=" value"
:fetch-suggestions="querySearchAsync"
placeholder="Try searching for "China""
@select="handleSelect">

3) Define related methods in script:

export default{
data() {

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

},
methods: {

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

}
}

2. Achieve the effect

Run the app, we can enter the keywords we need to search in the input box, such as "country", and you can see The drop-down list only displays the string containing "country" - "China".

5. Summary

This article introduces the methods of using vue-filter library and element-ui to implement fuzzy search in uniapp. Readers can choose different solutions according to actual needs. In the actual development process, we can use these two solutions to implement various functions based on fuzzy search.

The above is the detailed content of How to implement fuzzy search in uniapp. For more information, please follow other related articles on the PHP Chinese website!