在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支持拼音检索功能的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 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
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
干部行政关系介绍信
2014/01/17 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
房屋转让协议书范本
2014/04/11 职场文书
出差报告范文
2014/11/06 职场文书