vue输入框使用模糊搜索功能的实现代码

下面是关于使用Vue实现输入框模糊搜索的攻略。

1. 环境准备

首先需要准备一个Vue开发环境。我们可以使用Vue CLI进行快速构建，也可以手动搭建一个Vue项目。

2. 安装依赖

在项目根目录下通过命令行安装axios和element-ui：

npm install axios element-ui

3. 创建输入框组件

使用<el-input>组件创建一个输入框， 并为其添加v-model指令进行双向绑定：

<template>
  <el-input v-model="keyword" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    handleInput(val) {
      // 处理输入框中的值
    }
  }
}
</script>

4. 发送网络请求

使用axios发送网络请求，获取到数据后将其保存至options中：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      keyword: "",
      options: [] // 输入框下拉选项列表
    };
  },
  methods: {
    handleInput(val) {
      // 发送网络请求
      axios
        .get("your-api-url?keyword=" + val)
        .then(res => {
          this.options = res.data; // 将数据保存至选项列表
        });
    }
  }
};
</script>

5. 显示下拉选项列表

使用<el-autocomplete>组件来显示下拉选项列表，并为其绑定options和v-model指令：

<template>
  <el-autocomplete
    v-model="keyword"
    :fetch-suggestions="querySearch"
    placeholder="请输入..."
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      options: [],
      keyword: ""
    };
  },
  methods: {
    querySearch(queryString, cb) {
      axios
        .get("your-api-url?keyword=" + queryString)
        .then(res => {
          cb(res.data); // 回调函数返回匹配到的结果
        });
    },
    handleSelect(item) {
      console.log(item);
    }
  }
};
</script>

以上就是一个简单的Vue输入框模糊搜索的实现。

下面提供两条示例：

示例一

针对一个本地数组进行模糊搜索：

<template>
  <div>
    <el-input v-model="keyword" @input="handleInput"></el-input>
    <div v-if="!loading">
      <div v-for="(item, index) in options" :key="index">{{ item }}</div>
    </div>
    <div v-else>loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      options: [], // 输入框下拉选项列表
      loading: false
    };
  },
  methods: {
    handleInput(val) {
      this.options = []; // 清空选项
      val = val.toLowerCase(); // 统一字母大小写
      this.loading = true; // 开始加载动画

      // 模拟网络延迟
      setTimeout(() => {
        // 从数组中查找匹配项，添加至选项列表中
        this.options = [
          "apple",
          "banana",
          "cherry",
          "durian",
          "elderberry",
          "fig",
          "grape",
          "honeydew",
          "jackfruit",
          "kiwi",
          "lemon",
          "mango",
          "nectarine",
          "orange",
          "pear",
          "quince",
          "raspberry",
          "strawberry",
          "tangerine",
          "ugli fruit",
          "vanilla bean",
          "watermelon",
          "xigua",
          "yangmei",
          "zucchini"
        ].filter(item => item.includes(val));

        this.loading = false; // 关闭加载动画
      }, 1000);
    }
  }
};
</script>

示例二

使用lodash的debounce函数进行防抖处理：

<template>
  <div>
    <el-input v-model="keyword" @input="handleInput"></el-input>
    <div v-if="!loading">
      <div v-for="(item, index) in options" :key="index">{{ item }}</div>
    </div>
    <div v-else>loading...</div>
  </div>
</template>

<script>
import axios from "axios";
import debounce from "lodash/debounce";

export default {
  data() {
    return {
      keyword: "",
      options: [], // 输入框下拉选项列表
      loading: false
    };
  },
  methods: {
    querySearch(queryString, cb) {
      axios
        .get("your-api-url?keyword=" + queryString)
        .then(res => {
          cb(res.data); // 回调函数返回匹配到的结果
        });
    },
    handleInput: debounce(function(val) {
      this.loading = true;
      this.querySearch(val, data => {
        this.loading = false;
        this.options = data;
      });
    }, 200)
  }
};
</script>

以上就是使用Vue实现输入框模糊搜索的完整攻略，希望能够对你有所帮助！