摘要:最近公司的项目有个需求,需要使用联想查询功能。效果如下图经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数据,也可以完成动态抓取显示。
最近公司的项目有个需求,需要使用联想查询功能。
就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面。
效果如下图:
经过搜索找到这个插件,查阅资料可以完成这个功能,
即可以实现静态数据,也可以完成动态抓取显示。
使用方法如下:
(1)引入jquery-ui文件,当然还有jquery文件
(2)定义一个input标签
导入代码即可:
$(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); });
html标签代码
然后就是通过ajax动态请求后台数据方式如下:
$("#xxx").autocomplete({
source: function (request, response) { $.ajax({ url: "", type: "POST", dataType: "json", data: {}, success: function (data) { that.lineData=data; response(data); } }); }, minLength: 1, scrollHeight: 1000, autoFocus: true
});
后台返回数据类型为json数组格式
好了,到这里静态和动态的数据显示都完成了,当然为了满足自己项目肯定少不了修改相应的样式
修改的样式代码如下:
.ui-helper-hidden-accessible {display:none;} .ui-autocomplete { position: absolute; cursor: default; border-radius: 3px; border: 1px solid #c0c0c0; } .ui-menu {list-style: none;padding: 0;margin: 0;display: block;outline: none;} .ui-menu .ui-menu-item a {text-decoration:none;display:block;padding:.2em .4em;line-height:1.5;zoom:1;} .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #5897fb;border: none;color:#000;border-radius:0;font-weight: normal;}
好了,结束。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52727.html
摘要:最近公司的项目有个需求,需要使用联想查询功能。效果如下图经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数据,也可以完成动态抓取显示。 最近公司的项目有个需求,需要使用联想查询功能。就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面。效果如下图: showImg(https://segmentfault.com/img/bVbelDj?w=389&...
摘要:最近公司的项目有个需求,需要使用联想查询功能。效果如下图经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数据,也可以完成动态抓取显示。 最近公司的项目有个需求,需要使用联想查询功能。就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面。效果如下图: showImg(https://segmentfault.com/img/bVbelDj?w=389&...
摘要:中交上海航道勘察设计研究院有限公司以下简称中交上海航道设计院是中国交通建设股份有限公司下属,具有勘察设计研究咨询工程总承包工程检测造价咨询等综合能力的甲级设计院。随着全球经济一体化和产业结构的调整,我国传统企业的国际化势在必行,在经济发展新时代的大背景下,我国水工领域龙头企业-中交上海航道勘察设计研究院有限公司已经率先践行了国际化战略,在国际化发展道路上逐浪前行。中交上海航道勘察设计研究院有...
摘要:企业级业务联想的机会还有多大年初,当时的全球市场老大惠普公司在中国台湾打出了一则广告联想,连想都不要想,这一广告语随后引发轩然大波,并以惠普公司发出正式致歉信而告终。几天前,一篇题为《假如帝国的黄昏降临》的文章刷了屏,文中引述了桥水基金创始人Ray Dalio在新书《债务危机》中的一句话让人印象深刻:很多人认为过去发生在不同年代,不同国家的经济危机都是由不同的原因造成的,而我只看到了同样一些...
摘要:联想企业网盘版本可实现指定类型文件一键智能自动同步到用户的网盘个人空间,保护用户个人数据。在技术和产品上,联想企业网盘始终坚持创新驱动发展。在中国企业网盘市场上,玩家类型众多,包括IT厂商、SaaS类创业企业、互联网厂商、企业软件厂商和运营商,竞争激烈。既有BAT这样的大咖,也有层出不穷的创业公司,而联想企业网盘始终保持着稳健、快速的成长,至今连续5年占据40%的市场份额,一骑绝尘。6月19...
阅读 3080·2021-11-24 10:47
阅读 3831·2021-11-02 14:43
阅读 2228·2021-09-26 10:15
阅读 2253·2021-09-08 09:35
阅读 560·2019-08-30 12:45
阅读 2781·2019-08-29 17:04
阅读 3214·2019-08-26 14:05
阅读 1259·2019-08-26 12:10