实现一个具有级联效果的下拉搜索框,实现的结果如下图所示
我们主要通过这个组件,来学习一些细微的逻辑,比如: 如何计算input框内文字的长度; 如何获取光标的位置;如何实现滚动条随着上下键盘的按动进行移动……
具体需求如下
级联搜索最多不超过三级,以”.“作为级联搜索的连接符
搜索框跟着文本框中的”.“进行向后移动,向右移动的最大距离不能超过文本框的宽度
当用户修改之前的级联内容,则不进行搜索,并隐藏搜索框;若用户在之前输入的是”.“, 则将此”.“之后的内容全部删除并搜索当前的相关内容
接下来我们根据需求,来写我们的逻辑
首先我们搭建html页面
<input