如何在Element-ui中实现一个远程搜索功能

发布时间：2021-01-29 14:50:00

来源：亿速云

阅读：87

作者：Leah

这篇文章给大家介绍如何在Element-ui中实现一个远程搜索功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

方式一

export default {

name: "app",

data() {

return {

options: [],

value: [],

loading: false,

};

},

methods: {

// 当用户输入内容开始远程搜索模糊查询的时候，会触发remoteMethod方法

remoteMethod(query) {

// 如果用户输入内容了，就发请求拿数据，远程搜索模糊查询

if (query !== "") {

this.loading = true; // 开始拿数据喽

// 这里模拟发请求，res就当成发请求返回来的数据吧。

let res = [

{

label: "孙悟空",

value: 500,

},

{

label: "孙尚香",

value: 18,

},

{

label: "沙和尚",

value: 1000,

},

{

label: "沙师弟",

value: 999,

},

];

this.loading = false // 拿到数据喽

// 然后把拿到的所有数据，首先进行一个过滤，把有关联的过滤成一个新数组给到options使用

this.options = res.filter((item)=>{

// indexOf等于0代表只要首个字匹配的，如：搜索 王 王小虎数据会被过滤出来，但是 小虎王的数据不会被过滤出来。因为indexOf等于0代表以什么开头

// return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

// indexOf大于-1代表的是，只要有这个字出现的即可，如：搜索 王 王小虎、小虎王、小王虎都会被过滤出来。因为indexOf找不到才会返回-1，

// 大于-1说明只要有就行，不论是不是开头也好，中间也好，或者结尾也好

return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1

})

} else {

this.options = [];

}

},

},

};

说实话，我个人喜欢用方式二。来人呐，上代码

方式二

export default {

name: "app",

data() {

return {

state2: "",

fruit: [

{

value: "香蕉",

price: "8.58",

},

{

value: "车厘子",

price: "39.99",

},

{

value: "核桃",

price: "26.36",

},

{

value: "芒果",

price: "15.78",

},

],

};

},

methods: {

// 第二步

// 当queryString不为空的时候，就说明用户输入内容了，我们把用户输入的内容在数据库中做对比，如果有能够模糊关联的，就直接取出

// 并返回给带搜索建议的输入框，输入框就把返回的数据以下拉框的形式呈现出来，供用户选择。

querySearch(queryString, cb) {

if (queryString != "") {

// 输入内容以后才去做模糊查询

setTimeout(() => {

let callBackArr = []; // 准备一个空数组，此数组是最终返给输入框的数组

// 这个res是发请求，从后台获取的数据

const res = [

{

value: "苹果",

price: "13.25",

},

{

value: "苹果1",

price: "13.25",

},

{

value: "苹果2",

price: "13.25",

},

{

value: "苹果3",

price: "13.25",

},

{

value: "苹果4",

price: "13.25",

},

{

value: "苹果5",

price: "13.25",

},

];

res.forEach((item) => {

// 把数据库做遍历，拿用户输入的这个字，和数据库中的每一项做对比

// if (item.value.indexOf(queryString) == 0) { // 等于0 以什么什么开头

if (item.value.indexOf(queryString) > -1) { // 大于-1，只要包含就行，不再乎位置

// 如果有具有关联性的数据

callBackArr.push(item); // 就存到callBackArr里面准备返回呈现

}

});

// 经过这么一波查询操作以后，如果这个数组还为空，说明没有查询到具有关联的数据，就直接返回给用户暂无数据

if (callBackArr.length == 0) {

cb([{ value: "暂无数据", price: "暂无数据" }]);

}

// 如果经过这一波查询操作以后，找到数据了，就把装有关联数据的数组callBackArr呈现给用户

else {

cb(callBackArr);

}

}, 1000);

}

},

// 点击谁，就把谁放进去

handleSelect(item) {

this.fruit = []

this.fruit.push(item)

},

},

};

关于如何在Element-ui中实现一个远程搜索功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。