在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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
详解vue 命名视图
Aug 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
You might like
PHP中的类型约束介绍
2015/05/11 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python 实现批量图片识别并翻译
2020/11/02 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
办公室主任职责范文
2013/11/08 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
工程项目经理任命书
2014/06/05 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
销售督导岗位职责
2015/04/10 职场文书
服务行业标语口号
2015/12/26 职场文书
电工生产实习心得体会
2016/01/22 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python 图片添加美颜效果
2022/04/28 Python