在ie8上js实现简单的combobox功能(支持拼音检索)

最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)

目录结构：

test

|--js

|--index.html

在index页面中添加

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/autoComplete.js" ></script>
		<script type="text/javascript">

		</script>
	</head>
	<body>
		<input type="text" id="txtDisplay" />
		<select id="city">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">广州</option>
			<option value="4">深圳</option>
			<option value="5">重庆</option>
			<option value="6">天津</option>
			<option value="7">沈阳</option>
			<option value="8">南京</option>
			<option value="9">武汉</option>
			<option value="10">长春</option>
			<option value="11">成都</option>
			<option value="12">大连</option>
			<option value="13">杭州</option>
			<option value="14">青岛</option>
			<option value="15">a济南</option>
			<option value="16">厦门</option>
			<option value="17">福州</option>
			<option value="18">西安</option>
			<option value="19">长沙</option>
			<option value="20">哈尔滨</option>
		</select>
	</body>
</html>

效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。

js实现：

如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。

autoComplete.js

function Map() {
	/** 存放键的数组(遍历用到) */
	this.keys = new Array();
	/** 存放数据 */
    this.data = new Object();
     /**
     * 放入一个键值对
     * @param {String} key
     * @param {Object} value
     */
    this.put = function(key, value) {
        if(this.data[key] == null){
            this.keys.push(key);
        }
        this.data[key] = value;
    };
    /**
     * 获取某键对应的值
     * @param {String} key
     * @return {Object} value
     */
    this.get = function(key) {
        return this.data[key];
    };
    /**
     * 删除一个键值对
     * @param {String} key
     */
    this.remove = function(key) {
        this.keys.remove(key);
        this.data[key] = null;
    };
    /**
     * 遍历Map,执行处理函数
     *
     * @param {Function} 回调函数 function(key,value,index){..}
     */
    this.each = function(fn){
        if(typeof fn != 'function'){
            return;
        }
        var len = this.keys.length;
        for(var i=0;i<len;i++){
            var k = this.keys[i];
            fn(k,this.data[k],i);
        }
    };
    /**
     * 获取键值数组(类似Java的entrySet())
     * @return 键值对象{key,value}的数组
     */
    this.entrys = function() {
        var len = this.keys.length;
        var entrys = new Array(len);
        for (var i = 0; i < len; i++) {
            entrys[i] = {
                key : this.keys[i],
                value : this.data[i]
            };
        }
        return entrys;
    };
    /**
     * 判断Map是否为空
     */
    this.isEmpty = function() {
        return this.keys.length == 0;
    };   

    /**
     * 获取键值对数量
     */
    this.size = function(){
        return this.keys.length;
    };   

    /**
     * 重写toString
     */
    this.toString = function(){
        var s = "{";
        for(var i=0;i<this.keys.length;i++,s+=','){
            var k = this.keys[i];
            s += k+"="+this.data[k];
        }
        s+="}";
        return s;
    };
}
Array.prototype.remove = function(s) {
    for (var i = 0; i < this.length; i++) {
        if (s == this[i])
            this.splice(i, 1);
    }
}

现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。

var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理
var splitFleg = "_"; //分隔符
/**
 * 文本框，下拉框组合成自动补全组件
 * @param {Object} txtObj 文本框对象
 * @param {Object} selectObj 下拉框对象
 * @param {int} selectSize 显示下拉框的数量
 * @param {int} selectLength 下拉框的长度
 */
function AutoComplete(txtObj, selectObj, selectSize, selectLength) {
	this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中
	this.init = function() {
		this.initCache(); //缓存数据，将option的数据缓存到cacheContainer
		this.initCSS(); //初始化css  将select隐藏
		this.registerEvent(); //注册事件
		this.setSelectIdPosition(); //设置select的位置
		// 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理
		autoCompleteMap.put(txtObj.id + selectObj.id, this);
		// 界面刷新后,将直属机构下拉框text值,写入文本框
		var selectIndex = selectObj.selectedIndex;
		if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0
			txtObj.value = selectObj.options[selectIndex].text;

	}
		//缓存数据，将option的数据缓存到cacheContainer
	this.initCache = function() {
		var select_options = selectObj.options;
		if (select_options == null || select_options.length == 0) {
			return;
		}
		this.cacheContainer = [];
		for (var i = 0; i < select_options.length; i++) {
			this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value;
		}
	}
	this.initCSS = function() {
		selectObj.style.display = "none";
		selectObj.style.position = "absolute";
		selectObj.style.zIndex = 2;
		selectObj.style.width = selectLength + "px";
		selectObj.multiple = "multiple";

		txtObj.style.width = selectLength - 5 + "px";
	}

	this.registerEvent = function() {
		// 下拉框事件
		selectObj.ondblclick = this.doubleClickEvent;
		selectObj.onkeyup = this.keyupEvent;
		selectObj.onblur = this.OnblurEvent;
		selectObj.onfocus = this.OnfocusEvent;

		// 文本框事件
		txtObj.onfocus = this.OnfocusEvent;
		txtObj.onblur = this.OnblurEvent;
		txtObj.onkeyup = this.txtObjKeyupEvent;
	}
	this.setSelectIdPosition = function() {
		var position = this.findPosition(txtObj);

		selectObj.style.left = position[0] + "px";
		selectObj.style.top = position[3] + 3 + "px";
	}
	this.findPosition = function(oElement) {
		var x2 = 0;
		var y2 = 0;
		var width = oElement.offsetWidth;
		var height = oElement.offsetHeight;
		if (typeof(oElement.offsetParent) != 'undefined') {
			for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
				posX += oElement.offsetLeft;
				posY += oElement.offsetTop;
			}
			x2 = posX + width;
			y2 = posY + height;
			return [posX, posY, x2, y2];

		} else {
			x2 = oElement.x + width;
			y2 = oElement.y + height;
			return [oElement.x, oElement.y, x2, y2];
		}
	}

	//-----------------绑定的事件------------------------
	/**
	 * select下拉列表框双击事件
	 */
	this.doubleClickEvent = function() {
		selectObj.style.display = "none";
		var selectIndex = selectObj.selectedIndex;
		txtObj.value = selectObj.options[selectIndex].text;
	}
	/**
	 * 鼠标点击松开事件
	 */
	this.keyupEvent = function() {
		var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);

		if (event.keyCode == 13) {
			event.returnValue = false;
			var srcElem = document.activeElement; //获取当前聚焦的对象
			var testval = srcElem.id;
			if (testval == selectObj.id) {
				autocomplete.doubleClickEvent();
			}
		}
	}
	/**
	 * 聚焦事件
	 */
	this.OnblurEvent = function() {
		var srcElem = document.activeElement;
		var testval = srcElem.id;
		if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表
			selectObj.style.display = "none"; //将select列表隐藏
		}
	}
	/**
	 * 聚焦事件
	 */
	this.OnfocusEvent = function() {
		var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
		autocomplete.setSelectIdPosition();

		var srcElem = document.activeElement;
		var testval = srcElem.id;
		if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象
			if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作
				return;
			}
			var selectIdLength = selectObj.options.length;

			if (selectIdLength > selectSize) {
				selectObj.size = selectSize;
			} else {
				selectObj.size = selectIdLength;
			}
			selectObj.style.display = "block";
		}
	}
	var myTimeout = null;
	/**
	 * 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示
	 */
	this.txtObjKeyupEvent = function() {
		var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);

		if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件
			var srcElem = document.activeElement;
			var testval = srcElem.id;
			if (testval == txtObj.id) {
				selectObj.focus();
				if (selectObj.options.length >= 1)
					selectObj.options[0].selected = true;
			}
			return;
		}
		if (autocomplete.myTimeout != null) { //清空设置的定时执行事件
			clearTimeout(autocomplete.myTimeout);
		}
		autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200);
	}
	//----------------------------检索显示匹配数据-----------------------------
	/**
	 * 做主要的查询匹配操作
	 */
	this.doAJAX = function() {
		var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);

		//清空原来的OPTIONS
		autocomplete.clearAllOptions();

		autocomplete.setSelectIdPosition();
		var inputStr = txtObj.value;

		var arrays = autocomplete.compareInput(inputStr); //匹配符合查询条件的数据
		if (arrays == null || arrays.length == 0) {
			selectObj.style.display = "none";
			return;
		}

		selectObj.style.display = "block";

		for (var i = 0; i < arrays.length; i++) {
			var optionParams = arrays[i].split(splitFleg);
			var opt = new Option();
			opt.text = optionParams[0];
			opt.value = optionParams[1];

			selectObj.add(opt);
		}

		if (arrays.length > selectSize) {
			selectObj.size = selectSize;
		} else {
			selectObj.size = arrays.length;
		}
	}
	/**
	 * 清空原来的OPTIONS
	 */
	this.clearAllOptions = function() {
		//清空原来的OPTIONS
		var nL = selectObj.options.length;
		while (nL > 0) {
			selectObj.remove(selectObj.options.length - 1);
			nL = selectObj.options.length;
		}
	}
	//--------------------------数据检索规则---------------------
	/**
	 * 数据检索规则
	 * @param {String} inputStr input框中需要进行匹配的条件
	 */
	this.compareInput = function(inputStr) {
		if (this.cacheContainer.length == 0) {
			return;
		}

		inputStr = inputStr.replace(/(^[\s]*)/g, ""); //去前边空白字符串
		inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串
		if (inputStr == null || inputStr.length == 0) {
			return this.cacheContainer;
		}
		inputStr = disableSpecialCharacter(inputStr); //特殊字符处理

		var resultArray = new Array();

		var k = 0;
		var selectText = "";
		for (var i = 0; i < this.cacheContainer.length; i++) {
			selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[\s]*)/g, "");
			selectText = this.deleteSpecialSpace(selectText);
			if (compareRules(inputStr, selectText)) { //匹配规则
				resultArray[k] = this.cacheContainer[i];
				k++;
			}
		}
		return uniqueArray(resultArray);

	}
	/**
	 * 去除特殊空白字符串
	 */
	this.deleteSpecialSpace = function(srcStr) {
		var temp = "";
		for (var i = 0; i < srcStr.length; i++) {
			var charStr = srcStr.charAt(i);
			// 界面特殊空格Unicode=160，此空格既不是全角，也非半角
			if (charStr.charCodeAt(0) == 160) {
				continue;
			}
			temp += charStr;
		}
		return temp;
	}
}
/**
 * @param {String} inputStr 需要进行过滤的字符
 * 特殊字符处理
 */
function disableSpecialCharacter(inputStr) {
	inputStr = inputStr.replace(new RegExp("\\\\", 'g'), "\\\\");
	inputStr = inputStr.replace(new RegExp("\\.", 'g'), "\\.");
	inputStr = inputStr.replace(new RegExp("\\^", 'g'), "\\^");
	inputStr = inputStr.replace(new RegExp("\\{", 'g'), "\\{");
	inputStr = inputStr.replace(new RegExp("\\[", 'g'), "\\[");
	inputStr = inputStr.replace(new RegExp("\\(", 'g'), "\\(");
	inputStr = inputStr.replace(new RegExp("\\|", 'g'), "\\|");
	inputStr = inputStr.replace(new RegExp("\\]", 'g'), "\\]");
	inputStr = inputStr.replace(new RegExp("\\)", 'g'), "\\)");
	inputStr = inputStr.replace(new RegExp("\\*", 'g'), "\\*");
	inputStr = inputStr.replace(new RegExp("\\+", 'g'), "\\+");
	inputStr = inputStr.replace(new RegExp("\\?", 'g'), "\\?");
	return inputStr;
}
/**
 * 匹配规则
 * @param {String} inputStr   input框字符，匹配条件
 * @param {String} selectText  被匹配文字
 */
function compareRules(inputStr, selectText) {
	//匹配汉字
	return selectText.indexOf(inputStr) != -1 ;
}
/**
 * 过滤重复数据
 * @param {Object} arr 结果数组
 */
function uniqueArray(arr) {
	if(arr == null || arr.length == 0){
		return arr;
	}
	return arr.reverse().join(",").match( /([^,]+)(?!.*\1)/ig).reverse();
}
/**
 * 在原来onload的基础上加上自定义要执行的函数
 * @param {Object} func 加载函数
 */
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

引入将汉字转换成拼音的工具js

pinYinHanZi.js

/**
 * 汉子转换成拼音工具js
 */
var key2code = {
	65: "a",
	66: "b",
	67: "c",
	68: "d",
	69: "e",
	70: "f",
	71: "g",
	72: "h",
	73: "i",
	74: "j",
	75: "k",
	76: "l",
	77: "m",
	78: "n",
	79: "o",
	80: "p",
	81: "q",
	82: "r",
	83: "s",
	84: "t",
	85: "u",
	86: "v",
	87: "w",
	88: "x",
	89: "y",
	90: "z",
	49: "1",
	50: "2",
	51: "3",
	52: "4",
	53: "5",
	54: "6",
	55: "7",
	56: "8",
	57: "9",
	48: "0"
};

var spell = {
	0xB0A1: "a",
	0xB0A3: "ai",
	0xB0B0: "an",
	0xB0B9: "ang",
	0xB0BC: "ao",
	0xB0C5: "ba",
	0xB0D7: "bai",
	0xB0DF: "ban",
	0xB0EE: "bang",
	0xB0FA: "bao",
	0xB1AD: "bei",
	0xB1BC: "ben",
	0xB1C0: "beng",
	0xB1C6: "bi",
	0xB1DE: "bian",
	0xB1EA: "biao",
	0xB1EE: "bie",
	0xB1F2: "bin",
	0xB1F8: "bing",
	0xB2A3: "bo",
	0xB2B8: "bu",
	0xB2C1: "ca",
	0xB2C2: "cai",
	0xB2CD: "can",
	0xB2D4: "cang",
	0xB2D9: "cao",
	0xB2DE: "ce",
	0xB2E3: "ceng",
	0xB2E5: "cha",
	0xB2F0: "chai",
	0xB2F3: "chan",
	0xB2FD: "chang",
	0xB3AC: "chao",
	0xB3B5: "che",
	0xB3BB: "chen",
	0xB3C5: "cheng",
	0xB3D4: "chi",
	0xB3E4: "chong",
	0xB3E9: "chou",
	0xB3F5: "chu",
	0xB4A7: "chuai",
	0xB4A8: "chuan",
	0xB4AF: "chuang",
	0xB4B5: "chui",
	0xB4BA: "chun",
	0xB4C1: "chuo",
	0xB4C3: "ci",
	0xB4CF: "cong",
	0xB4D5: "cou",
	0xB4D6: "cu",
	0xB4DA: "cuan",
	0xB4DD: "cui",
	0xB4E5: "cun",
	0xB4E8: "cuo",
	0xB4EE: "da",
	0xB4F4: "dai",
	0xB5A2: "dan",
	0xB5B1: "dang",
	0xB5B6: "dao",
	0xB5C2: "de",
	0xB5C5: "deng",
	0xB5CC: "di",
	0xB5DF: "dian",
	0xB5EF: "diao",
	0xB5F8: "die",
	0xB6A1: "ding",
	0xB6AA: "diu",
	0xB6AB: "dong",
	0xB6B5: "dou",
	0xB6BC: "du",
	0xB6CB: "duan",
	0xB6D1: "dui",
	0xB6D5: "dun",
	0xB6DE: "duo",
	0xB6EA: "e",
	0xB6F7: "en",
	0xB6F8: "er",
	0xB7A2: "fa",
	0xB7AA: "fan",
	0xB7BB: "fang",
	0xB7C6: "fei",
	0xB7D2: "fen",
	0xB7E1: "feng",
	0xB7F0: "fo",
	0xB7F1: "fou",
	0xB7F2: "fu",
	0xB8C1: "ga",
	0xB8C3: "gai",
	0xB8C9: "gan",
	0xB8D4: "gang",
	0xB8DD: "gao",
	0xB8E7: "ge",
	0xB8F8: "gei",
	0xB8F9: "gen",
	0xB8FB: "geng",
	0xB9A4: "gong",
	0xB9B3: "gou",
	0xB9BC: "gu",
	0xB9CE: "gua",
	0xB9D4: "guai",
	0xB9D7: "guan",
	0xB9E2: "guang",
	0xB9E5: "gui",
	0xB9F5: "gun",
	0xB9F8: "guo",
	0xB9FE: "ha",
	0xBAA1: "hai",
	0xBAA8: "han",
	0xBABB: "hang",
	0xBABE: "hao",
	0xBAC7: "he",
	0xBAD9: "hei",
	0xBADB: "hen",
	0xBADF: "heng",
	0xBAE4: "hong",
	0xBAED: "hou",
	0xBAF4: "hu",
	0xBBA8: "hua",
	0xBBB1: "huai",
	0xBBB6: "huan",
	0xBBC4: "huang",
	0xBBD2: "hui",
	0xBBE7: "hun",
	0xBBED: "huo",
	0xBBF7: "ji",
	0xBCCE: "jia",
	0xBCDF: "jian",
	0xBDA9: "jiang",
	0xBDB6: "jiao",
	0xBDD2: "jie",
	0xBDED: "jin",
	0xBEA3: "jing",
	0xBEBC: "jiong",
	0xBEBE: "jiu",
	0xBECF: "ju",
	0xBEE8: "juan",
	0xBEEF: "jue",
	0xBEF9: "jun",
	0xBFA6: "ka",
	0xBFAA: "kai",
	0xBFAF: "kan",
	0xBFB5: "kang",
	0xBFBC: "kao",
	0xBFC0: "ke",
	0xBFCF: "ken",
	0xBFD3: "keng",
	0xBFD5: "kong",
	0xBFD9: "kou",
	0xBFDD: "ku",
	0xBFE4: "kua",
	0xBFE9: "kuai",
	0xBFED: "kuan",
	0xBFEF: "kuang",
	0xBFF7: "kui",
	0xC0A4: "kun",
	0xC0A8: "kuo",
	0xC0AC: "la",
	0xC0B3: "lai",
	0xC0B6: "lan",
	0xC0C5: "lang",
	0xC0CC: "lao",
	0xC0D5: "le",
	0xC0D7: "lei",
	0xC0E2: "leng",
	0xC0E5: "li",
	0xC1A9: "lia",
	0xC1AA: "lian",
	0xC1B8: "liang",
	0xC1C3: "liao",
	0xC1D0: "lie",
	0xC1D5: "lin",
	0xC1E1: "ling",
	0xC1EF: "liu",
	0xC1FA: "long",
	0xC2A5: "lou",
	0xC2AB: "lu",
	0xC2BF: "lv",
	0xC2CD: "luan",
	0xC2D3: "lue",
	0xC2D5: "lun",
	0xC2DC: "luo",
	0xC2E8: "ma",
	0xC2F1: "mai",
	0xC2F7: "man",
	0xC3A2: "mang",
	0xC3A8: "mao",
	0xC3B4: "me",
	0xC3B5: "mei",
	0xC3C5: "men",
	0xC3C8: "meng",
	0xC3D0: "mi",
	0xC3DE: "mian",
	0xC3E7: "miao",
	0xC3EF: "mie",
	0xC3F1: "min",
	0xC3F7: "ming",
	0xC3FD: "miu",
	0xC3FE: "mo",
	0xC4B1: "mou",
	0xC4B4: "mu",
	0xC4C3: "na",
	0xC4CA: "nai",
	0xC4CF: "nan",
	0xC4D2: "nang",
	0xC4D3: "nao",
	0xC4D8: "ne",
	0xC4D9: "nei",
	0xC4DB: "nen",
	0xC4DC: "neng",
	0xC4DD: "ni",
	0xC4E8: "nian",
	0xC4EF: "niang",
	0xC4F1: "niao",
	0xC4F3: "nie",
	0xC4FA: "nin",
	0xC4FB: "ning",
	0xC5A3: "niu",
	0xC5A7: "nong",
	0xC5AB: "nu",
	0xC5AE: "nv",
	0xC5AF: "nuan",
	0xC5B0: "nue",
	0xC5B2: "nuo",
	0xC5B6: "o",
	0xC5B7: "ou",
	0xC5BE: "pa",
	0xC5C4: "pai",
	0xC5CA: "pan",
	0xC5D2: "pang",
	0xC5D7: "pao",
	0xC5DE: "pei",
	0xC5E7: "pen",
	0xC5E9: "peng",
	0xC5F7: "pi",
	0xC6AA: "pian",
	0xC6AE: "piao",
	0xC6B2: "pie",
	0xC6B4: "pin",
	0xC6B9: "ping",
	0xC6C2: "po",
	0xC6CB: "pu",
	0xC6DA: "qi",
	0xC6FE: "qia",
	0xC7A3: "qian",
	0xC7B9: "qiang",
	0xC7C1: "qiao",
	0xC7D0: "qie",
	0xC7D5: "qin",
	0xC7E0: "qing",
	0xC7ED: "qiong",
	0xC7EF: "qiu",
	0xC7F7: "qu",
	0xC8A6: "quan",
	0xC8B1: "que",
	0xC8B9: "qun",
	0xC8BB: "ran",
	0xC8BF: "rang",
	0xC8C4: "rao",
	0xC8C7: "re",
	0xC8C9: "ren",
	0xC8D3: "reng",
	0xC8D5: "ri",
	0xC8D6: "rong",
	0xC8E0: "rou",
	0xC8E3: "ru",
	0xC8ED: "ruan",
	0xC8EF: "rui",
	0xC8F2: "run",
	0xC8F4: "ruo",
	0xC8F6: "sa",
	0xC8F9: "sai",
	0xC8FD: "san",
	0xC9A3: "sang",
	0xC9A6: "sao",
	0xC9AA: "se",
	0xC9AD: "sen",
	0xC9AE: "seng",
	0xC9AF: "sha",
	0xC9B8: "shai",
	0xC9BA: "shan",
	0xC9CA: "shang",
	0xC9D2: "shao",
	0xC9DD: "she",
	0xC9E9: "shen",
	0xC9F9: "sheng",
	0xCAA6: "shi",
	0xCAD5: "shou",
	0xCADF: "shu",
	0xCBA2: "shua",
	0xCBA4: "shuai",
	0xCBA8: "shuan",
	0xCBAA: "shuang",
	0xCBAD: "shui",
	0xCBB1: "shun",
	0xCBB5: "shuo",
	0xCBB9: "si",
	0xCBC9: "song",
	0xCBD1: "sou",
	0xCBD4: "su",
	0xCBE1: "suan",
	0xCBE4: "sui",
	0xCBEF: "sun",
	0xCBF2: "suo",
	0xCBFA: "ta",
	0xCCA5: "tai",
	0xCCAE: "tan",
	0xCCC0: "tang",
	0xCCCD: "tao",
	0xCCD8: "te",
	0xCCD9: "teng",
	0xCCDD: "ti",
	0xCCEC: "tian",
	0xCCF4: "tiao",
	0xCCF9: "tie",
	0xCCFC: "ting",
	0xCDA8: "tong",
	0xCDB5: "tou",
	0xCDB9: "tu",
	0xCDC4: "tuan",
	0xCDC6: "tui",
	0xCDCC: "tun",
	0xCDCF: "tuo",
	0xCDDA: "wa",
	0xCDE1: "wai",
	0xCDE3: "wan",
	0xCDF4: "wang",
	0xCDFE: "wei",
	0xCEC1: "wen",
	0xCECB: "weng",
	0xCECE: "wo",
	0xCED7: "wu",
	0xCEF4: "xi",
	0xCFB9: "xia",
	0xCFC6: "xian",
	0xCFE0: "xiang",
	0xCFF4: "xiao",
	0xD0A8: "xie",
	0xD0BD: "xin",
	0xD0C7: "xing",
	0xD0D6: "xiong",
	0xD0DD: "xiu",
	0xD0E6: "xu",
	0xD0F9: "xuan",
	0xD1A5: "xue",
	0xD1AB: "xun",
	0xD1B9: "ya",
	0xD1C9: "yan",
	0xD1EA: "yang",
	0xD1FB: "yao",
	0xD2AC: "ye",
	0xD2BB: "yi",
	0xD2F0: "yin",
	0xD3A2: "ying",
	0xD3B4: "yo",
	0xD3B5: "yong",
	0xD3C4: "you",
	0xD3D9: "yu",
	0xD4A7: "yuan",
	0xD4BB: "yue",
	0xD4C5: "yun",
	0xD4D1: "za",
	0xD4D4: "zai",
	0xD4DB: "zan",
	0xD4DF: "zang",
	0xD4E2: "zao",
	0xD4F0: "ze",
	0xD4F4: "zei",
	0xD4F5: "zen",
	0xD4F6: "zeng",
	0xD4FA: "zha",
	0xD5AA: "zhai",
	0xD5B0: "zhan",
	0xD5C1: "zhang",
	0xD5D0: "zhao",
	0xD5DA: "zhe",
	0xD5E4: "zhen",
	0xD5F4: "zheng",
	0xD6A5: "zhi",
	0xD6D0: "zhong",
	0xD6DB: "zhou",
	0xD6E9: "zhu",
	0xD7A5: "zhua",
	0xD7A7: "zhuai",
	0xD7A8: "zhuan",
	0xD7AE: "zhuang",
	0xD7B5: "zhui",
	0xD7BB: "zhun",
	0xD7BD: "zhuo",
	0xD7C8: "zi",
	0xD7D7: "zong",
	0xD7DE: "zou",
	0xD7E2: "zu",
	0xD7EA: "zuan",
	0xD7EC: "zui",
	0xD7F0: "zun",
	0xD7F2: "zuo"
};
var spellArray = new Array();
var pn = "";

function pinyin(char) {
	if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328)
		return char;
	if (spellArray[char.charCodeAt(0)])
		return spellArray[char.charCodeAt(0)]
	execScript("ascCode=hex(asc(\"" + char + "\"))", "vbscript");
	ascCode = eval("0x" + ascCode);
	if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3))
		return char;
	for (var i = ascCode;(!spell[i] && i > 0);)
		i--;
	return spell[i];
}

function toPinyin(str) {
	var pStr = ""
	for (var i = 0; i < str.length; i++) {
		if (str.charAt(i) == "\n")
			pStr += "<br>"
		else
			pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>"
			// else pStr += pinyin(str.charAt(i)) + " "
	}
	return pStr;
}

function toPinyinOnly(str) {
	var pStr = ""
	for (var i = 0; i < str.length; i++) {
		if (str.charAt(i) == "\n")
			pStr += "<br>"
		else
			pStr += pinyin(str.charAt(i));
		//pStr += " " + pinyin(str.charAt(i));
		// else pStr += pinyin(str.charAt(i)) + " "
	}
	return pStr;
}

function toPinyinShengmu(str) {
	var pStr = ""
	for (var i = 0; i < str.length; i++) {
		if (str.charAt(i) == "\n")
			pStr += "";
		else
			pStr += pinyin(str.charAt(i)).charAt(0);
		// else pStr += pinyin(str.charAt(i)) + " "
	}
	return pStr;
}

function pinyinSort(a, b) {
	var rValue = 0
	for (var i = 0; i < a.length; i++) {
		var pinA = pinyin(a.charAt(i))
		var pinB = pinyin(b.charAt(i))
		if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0)
			break
	}
	return rValue
}

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/autoComplete.js"></script>
		<script type="text/javascript" src="js/pinYinHanZi.js"></script>
		<script type="text/javascript">
			//自定义规则
			function compareRules(inputStr, selectText) {
				//匹配汉字  和拼音
				return selectText.indexOf(inputStr) != -1 || toPinyinShengmu(selectText).indexOf(inputStr) != -1 ||
						toPinyinOnly(selectText).indexOf(inputStr) != -1;
			}

			addLoadEvent(func);

			function func() {
				var textObj = document.getElementById("txtDisplay");
				var cityObj = document.getElementById("city");
				var autocomplete = new AutoComplete(textObj, cityObj, 10, 300);
				autocomplete.init();
			}
		</script>
	</head>

	<body>
		<input type="text" id="txtDisplay" />
		<select id="city">
			<option value="1">北京</option>
			<option value="2">    上海</option>
			<option value="3">广州</option>
			<option value="5">重庆</option>
			<option value="6">天津</option>
			<option value="7">沈阳</option>
			<option value="8">南京</option>
			<option value="9">武汉</option>
			<option value="10">长春</option>
			<option value="11">成都</option>
			<option value="12">大连</option>
			<option value="13">杭州</option>
			<option value="14">青岛</option>
			<option value="15">济南</option>
			<option value="16">厦门</option>
			<option value="17">福州</option>
			<option value="18">西安</option>
			<option value="19">长沙</option>
			<option value="20">哈尔滨</option>
		</select>

	</body>

</html>

注意：该版本有一些bug和对其他（除ie）浏览器不兼容性。

文件下载路径：文件下载

时间： 2024-10-24 19:14:45

在ie8上js实现简单的combobox功能(支持拼音检索)的相关文章

一个简单的Web服务器-支持Servlet请求

上接 一个简单的Web服务器-支持静态资源请求,这个服务器可以处理静态资源的请求,那么如何处理Servlet请求的呢? 判断是否是Servlet请求 首先Web服务器需要判断当前请求是否是Servlet请求. 像Tomcat,通过解析HTTP报文拿到请求url后,就可以根据web.xml来查找是否有匹配的Servlet,如果有匹配则认定为是一个有效的Servlet请求,然后将request,response传给对应的servlet的service()方法. 这里既然要实现一个简单的Web服务器,

JS中简单的this学习

我在学习JS初期,在使用this的时候经常出现问题,当然就是在现在,也有一些场景不能很好的明白this到底指代的是什么?看下面一个例子: ? 1 2 3 4 5 6 7 8 9 10 var x = 10;    var foo = {        x: 20,        bar: function() {            alert(this.x);        }    }    var bar = foo.bar;    foo.bar();    //20    bar()

JS实现简单的图片轮转

+(UIImage*)createImageFromView:(UIView*)view { //obtain scale CGFloat scale = [UIScreen mainScreen].scale; 开始绘图,下面方法,第一个参数表示区域大小.第二个参数表示是否是非透明的.如果需要显示半透明效果,需要传NO,否则传YES.第三个参数就是屏幕密度了 UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.wi

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页

io.js入门（二）—— 所支持的ES6（上）

io.js的官网上有专门介绍其所支持的ES6特性的页面(点我查看),上面介绍到,相比nodeJS,io.js已从根本上支持了新版V8引擎上所支持的ES6特性,无需再添加任何运行时标志(如 --harmony ). 有的朋友可能对Node不熟悉,不太知道harmony标志的情况,这里简单介绍下. 在NodeJS中,如果所要执行的脚本(假设为app.js)是基于ES6来编写的,那么得在命令的脚本路径前加上 “--harmony” 运行时标志,也就是这样执行脚本: node --harmony app

iOS开发——网络开发OC篇&amp;OC与JS交互简单案例

OC与JS交互简单案例 网页开发中三个重要的知识,这里就不详细介绍了! Html:页面代码 Css:样式 javascript:响应 先来看一段html的简单代码,里面涉及了上面的三个部分(很简单) 1 <html> 2 <!--描述网页信息--> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>hello world</title> 6 <script> 7 f

Sea.js 提供简单、极致的模块化开发体验

http://seajs.org/docs/#intro 为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. 自然直观的代码组织方式:依赖的自动加载.配置的简洁清晰,可以让我们更多地享受编码的乐趣. Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口. 兼容性 Sea.js 具备完善的测试用例,兼容所有主流浏览器:

angular4.0和angularJS、react.js、vue.js的简单比较

angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 angularJS的一些问题 性能问题[(脏检查机制)在angular中被废除了,整体性能被提升 路由问题[(使用的是第三方模块)在angular中路由器是主要的机制 作用域问题[(不能用原生的事件,想用就要调用一个方法)在angular中任何原生的事件都可以直接处理 表单验证问题[在angular中提供

Sea.js提供简单、极致的模块化开发体验

为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. 自然直观的代码组织方式:依赖的自动加载.配置的简洁清晰,可以让我们更多地享受编码的乐趣. Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口. 兼容性 Sea.js 具备完善的测试用例,兼容所有主流浏览器: Chrome 3+ ? Firefox 2+ ? Safa