编程 Javascript

在IE8上JS实现combobox支持拼音检索功能

Posted in Javascript onMay 23, 2016

最近在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>

在IE8上JS实现combobox支持拼音检索功能

效果：开始将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
[html] view plain copy 在CODE上查看代码片派生到我的代码片
<!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）浏览器不兼容性。

以上所述是小编给大家介绍的在IE8上JS实现combobox支持拼音检索功能的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

在IE8上JS实现combobox支持拼音检索功能

- Author -

指尖残雪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参

Jan 06 Javascript

js的表单操作简单计算器

Dec 29 Javascript

jQuery防止click双击多次提交及传递动态函数或多参数

Apr 02 Javascript

[原创]推荐10款最热门jQuery UI框架

Aug 19 Javascript

javascript下拉框选项单击事件的例子分享

Mar 04 Javascript

JavaScript用select实现日期控件

Jul 17 Javascript

javascript实现uploadify上传格式以及个数限制

Nov 23 Javascript

JS Ajax请求如何防止重复提交

Jun 13 Javascript

在javaScript中检测数据类型的几种方式小结

Mar 04 Javascript

zTree jQuery 树插件的使用(实例讲解)

Sep 25 jQuery

vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）

Aug 12 Javascript

JavaScript位置参数实现原理及过程解析

Sep 14 Javascript

浅析JavaScript 箭头函数 generator Date JSON

May 23 #Javascript

用js实现放大镜的效果的简单实例

May 23 #Javascript

jQuery实现摸拟alert提示框

May 22 #Javascript

javascript实现标签切换代码示例

May 22 #Javascript

超实用的JavaScript代码段附使用方法

May 22 #Javascript

JavaScript数组合并的多种方法

May 22 #Javascript

浅析JavaScript回调函数应用

May 22 #Javascript