[视频]纯前端无后台联想输入Demo的实现

来自环球网https://www.huanqiu.com/的优秀用户美食家山治，于2017-09-13在生活百科知识平台总结分享了一篇关于“纯前端无后台联想输入Demo的实现马云约谈”的经验，非常感谢美食家山治的辛苦付出，他总结的解决技巧方法及常用办法如下：

1009笔者这次做的功能是联想输入的Demo,我们在开发原型的时候，经常是没有后台，没有数据库的，那么我们想要直观的向客户展示出联想输入的功能,我们应该如何制作呢？笔者写了一种方法，供大家参考

实现方法详解

1/7分步阅读

笔者使用的是jquery，所以一开始需要引入jquery包

[图]2/7

然后定义一个数组，数组在这里相当数据库，用来存储我们联想的内容

[图]3/7

页面，主要是定义了一个input输入框和一个用来显示联想值的div

[图]4/7

这里是，根据输入框来定义用于显示的div的位置与宽高，使得这个显示div总是处于输入框的下方，而不会因为样式的变化，产生混乱

[图]5/7

这里是将符合条件的值，封装成一个子dom,然后将子dom添加进显示div中，并且给子dom增加点击事件，当点击时，将选择的值赋值给输入框

[图]6/7

这里是一个循环，循环数组中的内容，与输入框中的值进行匹配，筛选出符合条件的值

[图]7/7

完整方法展示，如果是后台的话，只需要将其中的循环比较方法，改成ajax请求，循环将后台传来的数据封装成子dom，添加进显示div就行了

[图]

注意事项

该经验由 爬楼高手 首发于百度经验

前端联想输入静态页面原型设计自动补全

编辑于2017-09-13，内容仅供参考并受版权保护

经验备注

我发现了这篇经验很有用：你也认同《纯前端无后台联想输入Demo的实现》的经验分享有价值，就请和朋友们一起分享吧。另外，纯前端无后台联想输入Demo的实现的经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。经验知识实用生活指南-解决你所有的生活难题！未经许可，谢绝转载。

本文网址：https://www.5058.cn/article/ab0b56306bf08ec15afa7d82.html

下一篇