关于options的一二（做下拉提示功能）

最新推荐文章于 2022-10-18 12:44:59 发布

brainwkernighan

最新推荐文章于 2022-10-18 12:44:59 发布

阅读量647

点赞数

文章标签： function javascript ajax google input css

本文链接：https://blog.youkuaiyun.com/brainwkernighan/article/details/5939297

版权

这两天用javascript做了一个类似google的文本框输入下拉提示的功能。把一些用到的，之前没想到的总结一下：

大体思路是：在在文本框下放一个<select></select>,每次文本框内容改变的时候将select中符合条件的option显示，不符合的隐藏，当文本框失去焦点时，隐藏<select>

数据源方面，可以采用ajax，也可以页面载入时将所有的数据抓到<option>中再做筛选。因为数据源比较少，并且没有安全方面的考虑，所以采用后面一种方法。

1)本想将不符合条件的options隐藏掉，后来发现 options 不支持 display='none' 选项，后来尝试着重新将select下面的符合条件的options筛选到数组中，然后赋给用select.innerHTML。最后的思路是：吧<select>和<option>放到一起重写。定义如下：

每次改动的时候将option保存在数组中，然后首尾加上<select>，最后赋给span.innerHTML.

2)因为是用css将<span>写到<input type='text'>下面，所以用绝对定位+top+left来定位<span>,<select>用width来控制隐藏下拉按钮

3)本以为将<option>修改贴到<span>中需要将<span>的childNode删除后再赋值。后来发现直接innerHTML即可。

4）在保存<option>到数组时，直接保存的是对象。这里还用到了数组的复制。array1 = array,本想用array1来保存array，但后来发现这是行不通的，他们是同一个引用 array1= new Array(array)也行不通。我采用的方法是遍历复制。

另外，本例做的是登陆页面，也采用了cookie保存技术。在用户点击登陆时提示是否保存用户名密码，如果确定则createCookie用户名和密码。在下次登陆时，首先readCookie，是否存在，如果存在则自动填入到用户窗口和密码窗口，或者可以直接登陆。如果用户选择不保存，则可以erasecookie使得cookie过期。

关于dom的操作，还是比较容易出错的。比如刚开始1）步骤中浪费了我一下午的时间来搞。刚开始的规划很重要，用什么方式直接决定你以后添加功能、排版的简易度。