转(https://blog.csdn.net/qq_37746973/article/details/78402812)

在script中添加下面两个函数

//queryString 为在框中输入的值
//callback 回调函数,将处理好的数据推回
querySearchAsync(queryString, callback) {
var list = [{}];
//调用的后台接口
let url = 后台接口地址 + queryString;
//从后台获取到对象数组
axios.get( url ).then((response)=>{
//在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
for(let i of response.data){
i.value = i.想要展示的数据; //将想要展示的数据作为value
}
list = response.data;
callback(list);
}).catch((error)=>{
console.log(error);
});

  

element input搜索框探索的更多相关文章

  1. input搜索框实时检索功能实现(超简单,核心原理请看思路即可)

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  2. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  3. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  4. input搜索框:根据历史记录自动填充后,去除默认黄色背景

    如果是纯色背景,直接通过box-shadow覆盖即可: input:-webkit-autofill { color: #333!important; -webkit-text-fill-color: ...

  5. 设计input搜索框提示文字点击消失的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. input搜索框的搜索功能

    如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...

  7. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  8. html中如何修改选中 用input做的搜索框 的边框颜色

    html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...

  9. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

随机推荐

  1. C语言逗号运算符和逗号表达式

    在C语言中逗号","也是一种运算符,称为逗号运算符. 其功能是把两个表达式连接起来组成一个表达式, 称为逗号表达式.其一般形式为:表达式1,表达式2 其求值过程是分别求两个表达式的 ...

  2. android SDK manager 无法获取更新版本列表【转载】

    http://mirrors.neusoft.edu.cn/eclipse/releases/luna/打开这个网址就可以看到adt的详细信息:  http://developer.android.c ...

  3. AngularJS方法 —— angular.bind

    描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...

  4. bzoj 3653: 谈笑风生 可持久化线段树

    题目大意 在一棵单位边权的有根树上支持询问: 给定a,k求满足下列条件的有序三元对的个数. a,b,c互不相同 a,b均为c的祖先 a,b树上距离<=k 题解 solution 1 首先我们知道 ...

  5. bzoj 2342: 双倍回文 回文自动机

    题目大意: 定义双倍回文串的左一半和右一半均是回文串的长度为4的倍数的回文串 求一个给定字符串中最长的双倍回文串的长度 题解: 我们知道可以简单地判定以某一点结尾的最长回文串 我们知道可以简单地判定以 ...

  6. EXPLAIN 命令

    MySQL EXPLAIN 命令详解 MySQL的EXPLAIN命令用于SQL语句的查询执行计划(QEP).这条命令的输出结果能够让我们了解MySQL 优化器是如何执行SQL 语句的.这条命令并没有提 ...

  7. spring 学习 requestMapping

    1:    @RequestMapping:处理请求地址映射的请求,有6个属性? `         value:   URL 地址  method:   GET/POST/PUT/DELETE co ...

  8. C语言计算日期间隔天数的经典算法解析

    #include <stdio.h> #include <stdlib.h> int day_diff(int year_start, int month_start, int ...

  9. leetcode笔记-1 twosum

    # -*- coding: utf-8 -*- #!/bin/env python # Python2.7 nums = [2, 4, 7, 0, 12, 6] print sorted(range( ...

  10. ES6学习之Reflect

    Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API Reflect设计目的: 将Object对象的一些明显属于语言内部的方法(比如Object.definePrope ...