Bagaimana untuk melaksanakan carian kabur dalam uniapp

Dengan pembangunan Internet mudah alih, permintaan pengguna untuk carian, penapisan dan fungsi lain juga meningkat. Dalam banyak aplikasi, carian kabur telah menjadi ciri yang sangat diperlukan. Bagaimana untuk melaksanakan carian kabur dalam uniapp? Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan terperinci.

1 Pengenalan kepada uniapp

Uniapp ialah alat pembangunan berdasarkan rangka kerja Vue.js, yang boleh membangunkan program mini, H5, App, akaun awam WeChat, program mini Alipay, dsb. . uniapp mempunyai kelebihan cross-platform, kecekapan tinggi, mudah digunakan, dan lain-lain, dan mempunyai prestasi yang baik dalam merealisasikan pelbagai fungsi.

2. Prinsip carian kabur

Sebelum membangunkan carian kabur, kita perlu memahami prinsip carian kabur. Carian kabur bermakna apabila mencari, rentetan yang kami masukkan tidak semestinya sepadan dengan hasil carian, tetapi sepadan dengan rentetan dalam julat tertentu, iaitu hasil yang mengandungi rentetan input. Contohnya, jika kita ingin mencari "universiti", kita juga boleh mencari hasil carian yang mengandungi "universiti" dengan memasukkan "大" atau "学". Ini adalah prinsip asas carian kabur.

3. Gunakan penapis vue untuk carian kabur dalam uniapp

1. Langkah pelaksanaan

Dalam uniapp, kita boleh menggunakan perpustakaan penapis vue untuk melaksanakan carian carian kabur. Langkah-langkah khusus adalah seperti berikut:

1) Gunakan npm untuk memasang pustaka penapis vue dan jalankan arahan berikut:

npm install vue-filter --save

2) Gunakan kabur apabila perlu Perkenalkan vue-filter ke dalam fail vue yang dicari:

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

3) Gunakan penapis dalam templat:

• {{ item }}

4) Tentukan penapis dalam skrip

import Vue daripada ' vue'
import VueFilter daripada 'vue-filter'
Vue.use(VueFilter)
eksport lalai {
data() {

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

},
dikira: {

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

}
}

2. Mencapai kesannya

Jalankan aplikasi, kita boleh masukkan kata kunci yang perlu kita cari dalam kotak input , seperti "an", Anda boleh melihat bahawa senarai itu hanya memaparkan rentetan yang mengandungi "an" - "pisang" dan "oren".

4. Gunakan elemen-ui dalam uniapp untuk carian kabur

Selain pustaka penapis vue, uniapp juga menyokong penggunaan elemen-ui. Kita juga boleh menggunakan komponen el-autolengkap dalam elemen-ui untuk melaksanakan carian kabur.

1. Langkah pelaksanaan

Langkah-langkahnya adalah seperti berikut:

1) Perkenalkan elemen-ui ke dalam fail vue yang perlu menggunakan elemen-ui komponen:

import { Autolengkap } daripada 'elemen-ui'

2) Gunakan komponen el-autolengkap dalam templat:

v-model=" value"
:fetch-suggestions="querySearchAsync"
placeholder="Cuba cari "China""
@select="handleSelect">

3) Tentukan kaedah berkaitan dalam skrip:

eksport lalai{
data() {

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

},
kaedah: {

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

}
}

2. Untuk mencapai kesan

Jalankan aplikasi, kita boleh memasukkan kata kunci yang perlu kita cari dalam kotak input, seperti sebagai "negara", dan anda boleh melihat Senarai juntai bawah hanya memaparkan rentetan yang mengandungi "negara" - "China".

5. Ringkasan

Artikel ini memperkenalkan kaedah menggunakan perpustakaan penapisan vue dan elemen-ui untuk melaksanakan carian kabur dalam uniapp. Pembaca boleh memilih penyelesaian yang berbeza mengikut keperluan sebenar. Dalam proses pembangunan sebenar, kita boleh menggunakan kedua-dua penyelesaian ini untuk melaksanakan pelbagai fungsi berdasarkan carian kabur.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan carian kabur dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!