文本框下拉效果
页面代码:<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 ,