在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 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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
第十三节 对象串行化 [13]
2006/10/09 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Vue中的字符串模板的使用
2018/05/17 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
python实现linux下抓包并存库功能
2018/07/18 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
浅谈Python中的模块
2020/06/10 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
实践单位评语
2014/04/26 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2016党员入党决心书
2015/09/22 职场文书
如何用python绘制雷达图
2021/04/24 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
i7 6700处理器相当于i5几代
2022/04/19 数码科技
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL