目的:输入时能够获得列表选项,通过上下键进行选择。
问题:造了个有四个值的数据,而通过上下键只能取得前两个,求解决方法。
万分感谢。
http://pan.baidu.com/s/1bnymCyz
代码在链接中
还有!!
为什么在电脑网页中总是无法在发布问题框中填写内容,并且无法提交。
selected函数你每调用一次i又被重新赋值成0了。当然选不了下面的了
你的代码中 i
是个局部变量, 你每次触发 selected
时, 都会被重新初始化为0,
然后根据你的 上/下 (38/40) 的条件, 执行 +1 或者 -1 的动作,
所以它永远都是 0 或者 1, 也就是你所看到它, 它只能选中前两个.
还有一个问题就是, 你在你的搜索框中 绑定的 keyup
事件, 每次都会重新去画 列表框, 导致你原来的那个 active
的项目丢失.
附改后的代码:
window.onload = function () {
var search = $('#search');
var result = $('#search-select');
var data = ['glen', 'lee', 'chen','liu', 'dong'];
//输入且即使获得自定义数据li列表
//删除原始值,输入值获得li,展开ul,并且传入data
$.on(search, 'keyup', show);
$.on(document, 'keyup', selected);
function show(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
var keynum = e.keyCode || e.which;
//屏蔽 上,下,回车
switch (keynum) {
case 38:
case 40:
case 13:
return;
}
result.innerHTML = '';
for (var i = 0; i < data.length; i++) {
var li = document.createElement('li');
li.innerHTML = data[i];
result.appendChild(li);
$.on(li, 'click', hide);
$.on(li, 'mouseover', addSelected);
$.on(li, 'mouseout', removeSelected);
$.enter(search, enter);
}
if (search.value !== '') {
result.style.display = 'block';
}
else {
result.style.display = 'none';
}
}
//鼠标点击选择、键盘上下enter选择(同时改变input的value)
function hide() {
result.style.display = 'none';
}
function selected() {
var e = e || window.event;
var target = e.target || e.srcElement;
var keynum = e.keyCode || e.which;
var i = -1;
var list = result.childNodes;
//增加一个循环, 用来找出来, 当前哪个是选中的
for(var j=list.length; j--; ){
//因为你创建出来的节点中, 有些还没有 class, 所以你的 hasClass方法会出错
//为了兼容, 我在这里的if语句中增加 list[j].className 条件
if(list[j].className && hasClass(list[j], 'active')){
i = j;
break;
}
}
//将当前的这个的激活样式移除掉
if(i >= 0){
removeClass(list[i], 'active');
}
switch (keynum) {
case 38:
i--;
if(i < 0){
i = list.length - 1;
}
addClass(list[i], 'active');
search.value = list[i].innerHTML;
i--;
break;
case 40:
i++;
//达到最后一个的时候, 跳到第一个
if(i >= list.length){
i = 0;
}
addClass(list[i], 'active');
search.value = list[i].innerHTML;
break;
case 13:
enter();
}
}
function addSelected(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
addClass(target, 'active');
search.value = target.innerHTML;
}
function removeSelected(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
removeClass(target, 'active');
}
function enter() {
var lis = result.childNodes;
for (var i = 0; i < lis.length; i++) {
if (lis[i].getAttribute('class') == 'active') {
search.value = lis[i].innerHTML;
}
}
}
}
改动点:
还有你在百度盘发代码的时候, 能不能压缩成一个包? 你的那些文件我是一个一个点下来的 =,=