当前位置:编程学习 > JAVA >>

文本框下拉效果

页面代码:
<html>
<body>
<div>
   <input id="autoCom" type="text" class="txt"  />
    <input id="autoC" type="text" class="txt" style="display: none; font-size: 12px; width: 313px; height: 19px;" />
</div>
</body>
</html>
 
js部分:
<script language="javascript" type="text/javascript">
    (autoComplete = {
        pop_len: 10,
        pop_cn: 'autoDis',
        hover_cn: 'cur',
        source: '无人区|无人驾驶|无人机|'.split('|'),
        init: function () {
            this.setDom();
            return this;
        },
        bind: function (x) {
            if (x.getAttribute('type') != 'text' || x.nodeName != 'INPUT')
                return null;
            var self = this;
            x.onkeyup = function (e) {
                e = e || window.event;
                var lis = self.pop.getElementsByTagName('li'), lens = self.pop.getElementsByTagName('li').length, n = lens, temp;
                if (e.keyCode == 38) {                                        //键盘up键被按下
                    if (self.pop.style.display != 'none') {
                        for (var i = 0; i < lens; i++) {                            //遍历结果数据,判断是否被选中
                            if (lis[i].className)
                                temp = i;
                            else
                                n--;
                        }
                        if (n == 0) {                                                //如果没有被选中的li元素,则选中最后一个
                            lis[lens - 1].className = self.hover_cn;
                            this.value = lis[lens - 1].innerHTML;
                        } else {                                                    //如果有被选中的元素,则选择上一个元素并赋值给input
                            if (lis[temp] == lis[0]) {                        //如果选中的元素是第一个孩子节点则跳到最后一个选中
                                lis[lens - 1].className = self.hover_cn;
                                this.value = lis[lens - 1].innerHTML;
                                lis[temp].className = '';
                            } else {
                                lis[temp - 1].className = self.hover_cn;
                                this.value = lis[temp - 1].innerHTML;
                                lis[temp].className = '';
                            }
                        }
                    } else                                                //如果弹出层没
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,