elementui——带建议的输入框远程搜索

悠悠 2023-01-06 12:00 183阅读 0赞

## elementui——带建议的输入框远程搜索 ##

<el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <script>
      export default { 
        data() { 
          return { 
            restaurants: [],
            state: '',
            timeout:  null
          };
        },
        methods: { 
          querySearchAsync(queryString, cb) { 
    		axios.get('url').then(res => { 
    			var restaurants = res.data; // 获取全部信息
    			// 自带过滤器匹配（输入）信息
    			var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    
    			clearTimeout(this.timeout);
    			this.timeout = setTimeout(() => { 
    			  cb(results);
    			}, 3000 * Math.random());
    		})
          },
    	  // 查询输入字符是否存在
          createStateFilter(queryString) { 
            return (state) => { 
    		**//这里和elementui组件不一样
    		//value可以换成从后端传回的data数组中的键，
    		//queryString.toLowerCase()输入的字符在所有返回信息中存在，!==-1代表匹配到了搜索的字符，
    		//官方的==0是搜索的字符在第一个字才会匹配，！=-1指的是只要是内容中只要有搜索的字符就会返回匹配**
              return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            };
          },
          handleSelect(item) { 
    	  //返回的意见点击选择触发事件
            console.log(item);
          }
        }
      };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android输入框实时模糊搜索

Android输入框实时模糊搜索很多开发场景会用到搜索框实时模糊搜索来帮助用户输入内容，如图 ![模糊搜索效果][2020080410205258.gif_pic_c

绝地灬酷狼/ 2023年03月05日 03:10/ 0 赞/ 29 阅读

相关 elementui——带建议的输入框远程搜索

elementui——带建议的输入框远程搜索 <el-autocomplete v-model="state" :fetch-sugges

悠悠/ 2023年01月06日 12:00/ 0 赞/ 184 阅读

相关设置elementUI中的输入框只能输入字母

<el-input class="inline-input" v-model="state" pre

小灰灰/ 2022年12月10日 08:49/ 0 赞/ 229 阅读

相关 html 搜索框回车搜索,在搜索框中输入运行回车

win7系统是我们比较熟悉的一个操作系统，也是微软史上最经典的一个系列，里面有很多的功能是我们日常生活中经常会使用到的，所以现在市场上对于win7系统都是一片好评。win7中有

╰+哭是因爲堅強的太久メ/ 2022年10月06日 07:58/ 0 赞/ 379 阅读

相关带搜索功能的下拉框select

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动

柔光的暖阳◎/ 2022年08月01日 13:46/ 0 赞/ 1406 阅读

相关 bootstrap suggest 前端输入框下拉提示、搜索建议插件

> [http://www.open-open.com/lib/view/open1415932442211.html][http_www.open-open.com_lib_

迷南。/ 2022年07月17日 01:30/ 0 赞/ 157 阅读

相关 jquery的搜索框输入提示页面

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="t

旧城等待，/ 2022年06月12日 00:44/ 0 赞/ 301 阅读

相关在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

![Center][] 在template中添加标签 <el-autocomplete v-model="detail.CUSTOMER_NAM

柔光的暖阳◎/ 2022年06月06日 05:18/ 0 赞/ 628 阅读

相关 vue 输入框回车搜索

@keyup.enter="queryAdminRole" <el-input style="width:300px;"

红太狼/ 2022年03月16日 05:28/ 0 赞/ 348 阅读

相关搜索框输入url到呈现搜索结果的过程

网页的请求过程打开浏览器，地址栏输 [baidu.com][]，按下回车，到用户看到内容，主要经历了如下步骤：（1）开始进行域名解析首先浏览器自身搜 DNS

电玩女神/ 2021年11月17日 13:32/ 0 赞/ 369 阅读