东莞互联网营销网站建设,wordpress上传图片慢,wordpress文件结构详解,免费做app的网站有哪些查看本专栏目录 关于作者 还是大剑师兰特#xff1a;曾是美国某知名大学计算机专业研究生#xff0c;现为航空航海领域高级前端工程师#xff1b;CSDN知名博主#xff0c;GIS领域优质创作者#xff0c;深耕openlayers、leaflet、mapbox、cesium#xff0c;canvas#x… 查看本专栏目录 关于作者 还是大剑师兰特曾是美国某知名大学计算机专业研究生现为航空航海领域高级前端工程师CSDN知名博主GIS领域优质创作者深耕openlayers、leaflet、mapbox、cesiumcanvaswebglecharts等技术开发欢迎加底部微信一起交流。 热门推荐内容链接1openlayers 从基础到精通300代码示例 2leaflet 热门分解学习教程150图文示例 3cesium 从0到1学习指南200代码示例 4 mapboxGL 从入门到实战150图文示例 5canvas 示例应用100揭密底层细节 6javascript从基础到高级示例展示200 7vue2 实战指南100个细节深度剖析 本文章目录 示例效果图示例源代码支持模糊搜索的方法不显示建议文字的原因 在做项目的时候时常会使用element-ui中的el-autocomplete 标签完成一个带输入建议的输入框但是容易疏忽的问题是提示性的文字出不来什么原因呢 请看示例。 未改变数据前文字出不来改变数据结构后文字可以出来。 同时这里做了改变支持模糊性搜索提示文字。
示例效果图 示例源代码
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-29
*/templatediv classdjs-boxdiv classtopBoxh3el-autocomplete 提示文字出不来修改支持模糊文字提示/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickchangeArray() 变换数据格式/el-button/h4/divdiv classdajianshi iddajianshiel-autocomplete classinline-input v-modelstate1 :fetch-suggestionsquerySearch placeholder请输入内容/el-autocomplete/div/div
/templatescriptexport default {data() {return {state1: ,restaurants: [{name: 三全鲜食北新泾店,address: 长宁区新渔路144号},{name: Hot honey 首尔炸鸡仙霞路,address: 上海市长宁区淞虹路661号},{name: 唦哇嘀咖,address: 上海市长宁区新泾镇金钟路999号2幢B幢第01层第1-02A单元},{name: 爱茜茜里(西郊百联),address: 长宁区仙霞西路88号1305室},{name: 爱茜茜里(近铁广场),address: 上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺},{name: 鲜果榨汁金沙江路和美广店,address: 普陀区金沙江路2239号金沙和美广场B1-10-6},{name: 开心丽果缤谷店,address: 上海市长宁区威宁路天山路341号},{name: 超级鸡车丰庄路店,address: 上海市嘉定区丰庄路240号}],}},mounted() {},methods: {//用于更改restaurants数据的格式。changeArray() { this.restaurants this.restaurants.map((item) {return {value: item.name}})},//它根据输入的查询字符串过滤餐厅数据并通过回调返回建议列表。querySearch(queryString, cb) { var restaurants this.restaurants;var results queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;cb(results);},//创建过滤函数的方法用于在查询时进行模糊匹配。createFilter(queryString) {return (restaurant) {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) -1);};},}}
/script
style scoped.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid black;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: black;color: #fff;}.dajianshi {width: 93%;height: 400px;margin: 5px auto 0;border: 1px solid #369;background-color: cde;padding: 20px;}
/style
支持模糊搜索的方法
官网上 第一个字或者字母匹配 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())0); 这里修改为 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) -1); 不显示建议文字的原因
输入建议的数据必须为对象数组data[{}, {}, {}…]且 对象必须包含“value”: “xxx”键值对 比如{“value”: item.name}当然也可以添加其他内容{“value”: item.name, “id”: item.id}
