JavaScript自动提示1.1

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30920597

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/realwall/archive/2011/10/17/2215485.html

本文介绍了一个使用JavaScript实现的自动提示搜索框功能。该功能能够根据用户输入动态提供匹配建议，并支持键盘导航选择建议项。文章详细展示了如何通过监听键盘事件来改善用户体验。

修改了我之前的版本，接近完美了

(function(window){
    var autoClue = {
		/*
		 * getContent 获取自动提示的数据的函数，该函数发送同步请求，并返回结果集数组
		 * txt 文本框dom对象
		 * clue ul无序列表dom对象
		 * txtInitValue 文本框初始化文本
		 * txtEnterAction 用户输入完成，按enter键后触发的函数
		 */
        clue : function(getContent, txt, clue, txtInitValue, txtEnterAction){
        	var isInit = false;
            clue.style.display = "none";
            var cluestr = clue.id;
            var createList = function(data){
                var i, str='', len = data.length;
                for(i = 0; i < len && i < 10; i++){
                    str += '<li id="list'
                    	+ cluestr
                        + i
                        +'">'
                        + decodeURIComponent(data.pop());
                        +'</li>';
                }
                return str;
            };
            if(!isInit){
            	txt.value = txtInitValue;
            }
            txt.onfocus = function(){
            	if(!isInit || txt.value == txtInitValue){
            		txt.value = "";
            	}
            };
            txt.onblur = function(){
            	if(txt.value == ''){
            		txt.value = txtInitValue;
            	}
            };
            txt.onkeyup = function(event){
                event = event || window.event;
                var input = encodeURIComponent(txt.value);
                var result = new Array();
                var i, len = input.length, resultLen;
                if(input == null || input == ''){
                	isInit = true;
                    return false;
                }
                if(event.keyCode == 40 && clue.innerHTML){
                    var listLen = clue.children.length, i, curIndex = -1;
                    for(i = 0; i < listLen; i++){
                        var tmp = clue.childNodes[i].style.backgroundColor;
                        if(tmp != "" && tmp != null && tmp != "none"){
                            curIndex = i;
                            var curList = document.getElementById("list" + cluestr + i);
                            if(navigator.appName =="Microsoft Internet Explorer"){
                                curList.style.backgroundColor = "";
                            }else{
                                curList.style.backgroundColor = null;
                            }
                            if(i == listLen-1){
                                curIndex = -1;
                            }
                            break;
                        };
                    }
                    var nextList = document.getElementById("list" + cluestr + (curIndex + 1));
                    nextList.style.backgroundColor = "#D1E5FC";
                    txt.value = nextList.innerHTML;
                    txt.focus();
                    return false;
                }
                if(event.keyCode == 38 && clue.innerHTML){
                    var listLen = clue.children.length, i, curIndex = 0;
                    for(i = 0; i < listLen; i++){
                        var tmp = clue.childNodes[i].style.backgroundColor;
                        if(tmp != "" && tmp != null && tmp != "none"){
                            curIndex = i;
                            var curList = document.getElementById("list" + cluestr + i);
                            if(navigator.appName =="Microsoft Internet Explorer"){
                                curList.style.backgroundColor = "";
                            }else{
                                curList.style.backgroundColor = null;
                            }
                            if(i == listLen-1){
                                curIndex = -1;
                            }
                            break;
                        };
                    }
                    var preList = document.getElementById("list" + cluestr + ((curIndex - 1 + listLen) % listLen));
                    preList.style.backgroundColor = "#D1E5FC";
                    txt.value = preList.innerHTML;
                    txt.focus();
                    return false;
                	
                }
                if(event.keyCode == 13 && clue.innerHTML){
                	var listLen = clue.children.length, i, curIndex = -1, submitFlag = true;
                    for(i = 0; i < listLen; i++){
                        var tmp = clue.childNodes[i].style.backgroundColor;
                        if(tmp != "" && tmp != null && tmp != "none"){
                        	submitFlag = false;
                            curIndex = i;
                            var curList = document.getElementById("list" + cluestr + i);
                            txt.value = curList.innerHTML;
                            clue.innerHTML = "";
                            clue.style.display = "none";
                            break;
                        };
                    }
                    if(submitFlag){
                    	txtEnterAction();
                    }
                    return false;
                }
                if(event.keyCode == 13 && clue.innerHTML == ''){
                	txtEnterAction();
                    return false;
                }
                if(txt.value != ''){
                	var content = getContent.call(this, txt.value);
                }
                for(i = 0; i < content.length; i++){
                    if(input == content[i].substring(0, len)){
                        result.push(content[i]);
                    }
                }
                resultLen = result.length;
                resultStr = createList(result);
                clue.innerHTML = resultStr;
                clue.style.display = "block";
                for(i = 0; i < resultLen; i++){
                    var list = document.getElementById("list" + cluestr + i);
                    list.onclick = function(){
                        txt.value = this.innerHTML;
                        clue.style.display = "none";
                    };
                }
            };
            
            document.body.onclick = function(){
            	if(clue.style.display != "none"){
            		clue.style.display = "none";
            	}
            };
        }
    };
    window.autoClue = autoClue;
})(window);

转载于:https://www.cnblogs.com/realwall/archive/2011/10/17/2215485.html