jsファジークエリ

一連の考え

ユーザーは入力を通じてコン​​テンツを入力します。コードでは、入力の @input メソッドを使用して、ユーザーの入力をリアルタイムで監視します。ユーザーの入力コンテンツを取得し、
候補配列のコンテンツと比較して、新しい配列を生成します。

<template>
  <div class="">
    <el-input placeholder="请输入" v-model="val" @input="changeInput"></el-input>
    <div style="width: 300px;height:300px;background-color: #f5f5f5;">
      <div style="height: 30px;line-height: 30px;"></div>
    </div>

  </div>
</template>

<script setup>
import {
      
      ref,reactive} from 'vue'
let val = ref('')
let val_list = reactive([
{
      
      name: '防火防盗1', type: 1},
{
      
      name: '士大夫2', type: 1},
{
      
      name: '好地方3', type: 1},
{
      
      name: '3给4', type: 1},
{
      
      name: '的发挥5', type: 1},
{
      
      name: '老两口的风格6', type: 1},
{
      
      name: '理论的7', type: 1},
])

let changeInput = (e) => {
      
      
  console.log('32df', val_list)
  console.log('拿到的',fuzzyQuery(val_list, e))

}

let fuzzyQuery = (list, keyWord) => {
      
      
    var arr = [];
    for (var i = 0; i < list.length; i++) {
      
      
      if (list[i].name.indexOf(keyWord) >= 0) {
      
      
        arr.push(list[i]);
      }
    }
    return arr;
  }
</script>

<style scoped lang="scss">

</style>