开发多列AutoComplate功能遇到一些问题的总结

需要开发1个类型sina下图中的多列AutoComplate的功能,在开发过程中一些JS问题的总结。



1、弹出层位置的确定,弹出的层要显示在输入框的下面,那怎么取道精确的位置了?
  1. var e = this.binder;   // 表示输入框对象 
  2. var x = e.offsetLeft, y = e.offsetTop + e.clientHeight;
  3. while(e=e.offsetParent){x += e.offsetLeft; y += e.offsetTop;}
2、在用户输入就引发后台AJAX去请求数据,首先想到了输入框的onpropertychange事件,但firefox不支持onpropertychange,而且当用JS给文本框复制的时候也会引发onpropertychange事件,这不是我想要的,最后选择使用onkeyup事件。

3、为了让用户点击页面上其他地方时候就自动隐藏弹出层,所以使用了输入框的onblur事件;
   为了让用户在弹出层中点击某一行把该行的数据填充到输入框中,就使用了tr的onclick事件,在onclick事件中把值赋给文本框。但这2个事件会有个冲突,就是当点击tr的时候会先引发输入框的onblur事件,在onblur事件中会把整个table给隐藏了,所以就无法在引发tr的onclick事件了。最后在onblur加入window.setTimeout来延迟隐藏table,从而解决该问题。

4、为了支持用户使用上下方向键来选择弹出的记录,重写了文本框的onkeydown事件。

最终做出来效果图如下:

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值