源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

input输入框的自动匹配(原生代码)

  • 时间:2021-12-03 11:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:input输入框的自动匹配(原生代码)
今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手。 [b]本题有以下要求[/b]: 1. 使用原生代码实现,不可使用任何框架; 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方; 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗; 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中; [b]思 路[/b] 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询返回的一个数组(下称列表),匹配方式为用输入值作为开始值匹配每个列表值,将符合筛选条件的项输出到页面。 [b]分 析[/b] 第三点要求中关键字是加粗,这里用正则替换就好了。 第四点要求的关键字就比较多了,一句话暗藏许多杀机,这一部分主要是针对键盘,首先是上下按键,然后是回车,还有一个写入到input框。 到这,如果你认为完了那就操之过急了,至少还有4个隐性的需求。 •第一项默认高亮显示,上下按键的同时当前项高亮。 •按下Enter默认第一项被选中。 •鼠标经过时当前项高亮。 •支持点击选中项。 也许还有所遗漏,这里就不纠结了。 [b]实 践[/b] 这虽然是一道JS题,但这之前,页面结构还是要先写好。
[url=http://www.jsfor.com/wp-content/uploads/2012/08/jsfor.com-mianshi-shijian-renren.html]猛击我查看Demo[/url] 真实业务场景中,可能要对用户的输入作实时Ajax查询,这代表着每敲一个字母都会有一次查询。 然而如此频繁发送Ajax请求实在太不划算,响应速度上也不容许这样的实现。 我的思路是当用户敲第一个字母时,发送一次请求(请求数据一般有数量限制,一般是10条),并将返回值储存起来(下称缓存)。 在第一个字母之后的用户输入,都在缓存里面筛选,到这里就如同本地查询一样了,每输入一个字母,精确度越来越高,缓存越来越小。 当用户清空,重新输入时重复以上的步骤。 当然,不排除会有一些更加复杂的业务场景,比如,在匹配充足的情况下,要保证用户每次输入都有10条数据可选,这就需要更多的判断以及请求。 所以,具体实现取决于真实的业务场景。 至此,本文结束。感谢阅读,欢迎有血有肉的置评。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部