脚本宝典收集整理的这篇文章主要介绍了js实例在IE8上JS实现combobox支持拼音检索功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)
目录结构：
|--js
在index页面中添加
index.html
<!DOCTYPE html> <html> <head> <;meta charset="utf-8" /> <tITle></title> <script type="text/javascript" src="js/autocomplete.js" ></script> <script type="text/javascript"> </script> </head> <body> <input type="text" id="txtDisplay" /> <select id="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> <option value="5">重庆</option> <option value="6">天津</option> <option value="7">沈阳</option> <option value="8">南京</option> <option value="9">武汉</option> <option value="10">长春</option> <option value="11">成都</option> <option value="12">大连</option> <option value="13">杭州</option> <option value="14">青岛</option> <option value="15">a济南</option> <option value="16">厦门</option> <option value="17">福州</option> <option value="18">西安</option> <option value="19">长沙</option> <option value="20">哈尔滨</option> </select> </body> </html>
效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。
js实现：
如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。
autoComplete.js
function Map() { /** 存放键的数组(遍历用到) */ this.keys = new Array(); /** 存放数据 */ this.data = new Object(); /** * 放入一个键值对 * @param {String} key * @param {Object} value */ this.put = function(key, value) { if(this.data[key] == null){ this.keys.push(key); } this.data[key] = value; }; /** * 获取某键对应的值 * @param {String} key * @return {Object} value */ this.get = function(key) { return this.data[key]; }; /** * 删除一个键值对 * @param {String} key */ this.remove = function(key) { this.keys.remove(key); this.data[key] = null; }; /** * 遍历Map,执行处理函数 * * @param {Function} 回调函数 function(key,value,index){..} */ this.each = function(fn){ if(typeof fn != 'function'){ return; } VAR len = this.keys.length; for(var i=0;i<len;i++){ var k = this.keys[i]; fn(k,this.data[k],i); } }; /** * 获取键值数组(类似Java的entrySet()) * @return 键值对象{key,value}的数组 */ this.entrys = function() { var len = this.keys.length; var entrys = new Array(len); for (var i = 0; i < len; i++) { entrys[i] = { key : this.keys[i], value : this.data[i] }; } return entrys; }; /** * 判断Map是否为空 */ this.iSEMpty = function() { return this.keys.length == 0; }; /** * 获取键值对数量 */ this.size = function(){ return this.keys.length; }; /** * 重写toString */ this.toString = function(){ var s = "{"; for(var i=0;i<this.keys.length;i++,s+=','){ var k = this.keys[i]; s += k+"="+this.data[k]; } s+="}"; return s; }; } Array.PRototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } 现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。
var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理 var splitFleg = "_"; //分隔符 /** * 文本框，下拉框组合成自动补全组件 * @param {Object} txtObj 文本框对象 * @param {Object} selectObj 下拉框对象 * @param {int} selectSize 显示下拉框的数量 * @param {int} selectLength 下拉框的长度 */ function AutoComplete(txtObj, selectObj, selectSize, selectLength) { this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中 this.init = function() { this.initCache(); //缓存数据，将option的数据缓存到cacheContainer this.initCSS(); //初始化css 将select隐藏 this.registerevent(); //注册事件 this.setSelectIdPosition(); //设置select的位置 // 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理 autoCompleteMap.put(txtObj.id + selectObj.id, this); // 界面刷新后,将直属机构下拉框text值,写入文本框 var selectIndex = selectObj.selectedIndex; if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0 txtObj.value = selectObj.options[selectIndex].text; } //缓存数据，将option的数据缓存到cacheContainer this.initCache = function() { var select_options = selectObj.options; if (select_options == null || select_options.length == 0) { return; } this.cacheContainer = []; for (var i = 0; i < select_options.length; i++) { this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value; } } this.initCSS = function() { selectObj.style.display = "none"; selectObj.style.position = "absolute"; selectObj.style.zIndex = 2; selectObj.style.width = selectLength + "px"; selectObj.multiple = "multiple"; txtObj.style.width = selectLength - 5 + "px"; } this.registerEvent = function() { // 下拉框事件 selectObj.ondblclick = this.doubleClickEvent; selectObj.onkeyup = this.keyupEvent; selectObj.onblur = this.OnblurEvent; selectObj.onfocus = this.OnfocusEvent; // 文本框事件 txtObj.onfocus = this.OnfocusEvent; txtObj.onblur = this.OnblurEvent; txtObj.onkeyup = this.txtObjKeyupEvent; } this.setSelectIdPosition = function() { var position = this.findPosition(txtObj); selectObj.style.left = position[0] + "px"; selectObj.style.top = position[3] + 3 + "px"; } this.findPosition = function(oElement) { var x2 = 0; var y2 = 0; var width = oElement.offsetWidth; var height = oElement.offsetHeight; if (typeof(oElement.offsetParent) != 'undefined') { for (var pOSX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x2 = posX + width; y2 = posY + height; return [posX, posY, x2, y2]; } else { x2 = oElement.x + width; y2 = oElement.y + height; return [oElement.x, oElement.y, x2, y2]; } } //-----------------绑定的事件------------------------ /** * select下拉列表框双击事件 */ this.doubleClickEvent = function() { selectObj.style.display = "none"; var selectIndex = selectObj.selectedIndex; txtObj.value = selectObj.options[selectIndex].text; } /** * 鼠标点击松开事件 */ this.keyupEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 13) { event.returnValue = false; var srcElem = document.activeElement; //获取当前聚焦的对象 var testval = srcElem.id; if (testval == selectObj.id) { autocomplete.doubleClickEvent(); } } } /** * 聚焦事件 */ this.OnblurEvent = function() { var srcElem = document.activeElement; var testval = srcElem.id; if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表 selectObj.style.display = "none"; //将select列表隐藏 } } /** * 聚焦事件 */ this.OnfocusEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); autocomplete.setSelectIdPosition(); var srcElem = document.activeElement; var testval = srcElem.id; if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象 if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作 return; } var selectidlength = selectObj.options.length; if (selectIdLength > selectSize) { selectObj.size = selectSize; } else { selectObj.size = selectIdLength; } selectObj.style.display = "block"; } } var myTimeout = null; /** * 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示 */ this.txtObjKeyupEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件 var srcElem = document.activeElement; var testval = srcElem.id; if (testval == txtObj.id) { selectObj.focus(); if (selectObj.options.length >= 1) selectObj.options[0].selected = true; } return; } if (autocomplete.myTimeout != null) { //清空设置的定时执行事件 clearTimeout(autocomplete.myTimeout); } autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200); } //----------------------------检索显示匹配数据----------------------------- /** * 做主要的查询匹配操作 */ this.doAJAX = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); //清空原来的OPTIONS autocomplete.clearAllOptions(); autocomplete.setSelectIdPosition(); var inputStr = txtObj.value; var arrays = autocomplete.COMpareInput(inputStr); //匹配符合查询条件的数据 if (arrays == null || arrays.length == 0) { selectObj.style.display = "none"; return; } selectObj.style.display = "block"; for (var i = 0; i < arrays.length; i++) { var optionParams = arrays[i].split(splitFleg); var opt = new Option(); opt.text = optionParams[0]; opt.value = optionParams[1]; selectObj.add(opt); } if (arrays.length > selectSize) { selectObj.size = selectSize; } else { selectObj.size = arrays.length; } } /** * 清空原来的OPTIONS */ this.clearAllOptions = function() { //清空原来的OPTIONS var nL = selectObj.options.length; while (nL > 0) { selectObj.remove(selectObj.options.length - 1); nL = selectObj.options.length; } } //--------------------------数据检索规则--------------------- /** * 数据检索规则 * @param {String} inputStr input框中需要进行匹配的条件 */ this.compareInput = function(inputStr) { if (this.cacheContainer.length == 0) { return; } inputStr = inputStr.replace(/(^[/s]*)/g, ""); //去前边空白字符串 inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串 if (inputStr == null || inputStr.length == 0) { return this.cacheContainer; } inputStr = disableSpecialCharacter(inputStr); //特殊字符处理 var resultArray = new Array(); var k = 0; var selectText = ""; for (var i = 0; i < this.cacheContainer.length; i++) { selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[/s]*)/g, ""); selectText = this.deleteSpecialSpace(selectText); if (compareRules(inputStr, selectText)) { //匹配规则 resultArray[k] = this.cacheContainer[i]; k++; } } return uniqueArray(resultArray); } /** * 去除特殊空白字符串 */ this.deleteSpecialSpace = function(srcStr) { var temp = ""; for (var i = 0; i < srcStr.length; i++) { var charStr = srcStr.charAt(i); // 界面特殊空格Unicode=160，此空格既不是全角，也非半角 if (charStr.charCodeAt(0) == 160) { continue; } temp += charStr; } return temp; } } /** * @param {String} inputStr 需要进行过滤的字符 * 特殊字符处理 */ function disableSpecialCharacter(inputStr) { inputStr = inputStr.replace(new RegExp("////", 'g'), "////"); inputStr = inputStr.replace(new RegExp("//.", 'g'), "//."); inputStr = inputStr.replace(new RegExp("//^", 'g'), "//^"); inputStr = inputStr.replace(new RegExp("//{", 'g'), "//{"); inputStr = inputStr.replace(new RegExp("//[", 'g'), "//["); inputStr = inputStr.replace(new RegExp("//(", 'g'), "//("); inputStr = inputStr.replace(new RegExp("//|", 'g'), "//|"); inputStr = inputStr.replace(new RegExp("//]", 'g'), "//]"); inputStr = inputStr.replace(new RegExp("//)", 'g'), "//)"); inputStr = inputStr.replace(new RegExp("//*", 'g'), "//*"); inputStr = inputStr.replace(new RegExp("//+", 'g'), "//+"); inputStr = inputStr.replace(new RegExp("//?", 'g'), "//?"); return inputStr; } /** * 匹配规则 * @param {String} inputStr input框字符，匹配条件 * @param {String} selectText 被匹配文字 */ function compareRules(inputStr, selectText) { //匹配汉字 return selectText.indexOf(inputStr) != -1 ; } /** * 过滤重复数据 * @param {Object} arr 结果数组 */ function uniqueArray(arr) { if(arr == null || arr.length == 0){ return arr; } return arr.reverse().join(",").match( /([^,]+)(?!.*/1)/ig).reverse(); } /** * 在原来onload的基础上加上自定义要执行的函数 * @param {Object} func 加载函数 */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
引入将汉字转换成拼音的工具js
pinYinHanZi.js
/** * 汉子转换成拼音工具js */ var key2code = { 65: "a", 66: "b", 67: "c", 68: "d", 69: "e", 70: "f", 71: "g", 72: "h", 73: "i", 74: "j", 75: "k", 76: "l", 77: "m", 78: "n", 79: "o", 80: "p", 81: "q", 82: "r", 83: "s", 84: "t", 85: "u", 86: "v", 87: "w", 88: "x", 89: "y", 90: "z", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: "6", 55: "7", 56: "8", 57: "9", 48: "0" }; var spell = { 0xB0A1: "a", 0xB0A3: "ai", 0xB0B0: "an", 0xB0B9: "ang", 0xB0BC: "ao", 0xB0C5: "ba", 0xB0D7: "bai", 0xB0DF: "ban", 0xB0EE: "bang", 0xB0FA: "bao", 0xB1AD: "bei", 0xB1BC: "ben", 0xB1C0: "beng", 0xB1C6: "bi", 0xB1DE: "bian", 0xB1EA: "biao", 0xB1EE: "bie", 0xB1f2: "bin", 0xB1F8: "bing", 0xB2A3: "bo", 0xB2B8: "bu", 0xB2C1: "ca", 0xB2C2: "cai", 0xB2CD: "can", 0xB2D4: "cang", 0xB2D9: "cao", 0xB2DE: "ce", 0xB2E3: "ceng", 0xB2E5: "cha", 0xB2F0: "chai", 0xB2F3: "chan", 0xB2FD: "chang", 0xB3AC: "chao", 0xB3B5: "che", 0xB3BB: "chen", 0xB3C5: "cheng", 0xB3D4: "chi", 0xB3E4: "chong", 0xB3E9: "chou", 0xB3F5: "chu", 0xB4A7: "chuai", 0xB4A8: "chuan", 0xB4AF: "chuang", 0xB4B5: "chui", 0xB4BA: "chun", 0xB4C1: "chuo", 0xB4C3: "ci", 0xB4CF: "cong", 0xB4D5: "cou", 0xB4D6: "cu", 0xB4DA: "cuan", 0xB4DD: "cui", 0xB4E5: "cun", 0xB4E8: "cuo", 0xB4EE: "da", 0xB4F4: "dai", 0xB5A2: "dan", 0xB5B1: "dang", 0xB5B6: "DAO", 0xB5C2: "de", 0xB5C5: "deng", 0xB5CC: "di", 0xB5DF: "dian", 0xB5EF: "diao", 0xB5F8: "die", 0xB6A1: "ding", 0xB6AA: "diu", 0xB6AB: "dong", 0xB6B5: "dou", 0xB6BC: "du", 0xB6CB: "duan", 0xB6D1: "dui", 0xB6D5: "dun", 0xB6DE: "duo", 0xB6EA: "e", 0xB6F7: "en", 0xB6F8: "er", 0xB7A2: "fa", 0xB7AA: "fan", 0xB7BB: "fang", 0xB7C6: "fei", 0xB7D2: "fen", 0xB7E1: "feng", 0xB7F0: "fo", 0xB7F1: "fou", 0xB7F2: "fu", 0xB8C1: "ga", 0xB8C3: "gai", 0xB8C9: "gan", 0xB8D4: "gang", 0xB8DD: "gao", 0xB8E7: "ge", 0xB8F8: "gei", 0xB8F9: "gen", 0xB8FB: "geng", 0xB9A4: "gong", 0xB9B3: "gou", 0xB9BC: "gu", 0xB9CE: "gua", 0xB9D4: "guai", 0xB9D7: "guan", 0xB9E2: "guang", 0xB9E5: "gui", 0xB9F5: "gun", 0xB9F8: "guo", 0xB9FE: "ha", 0xBAA1: "hai", 0xBAA8: "han", 0xBABB: "hang", 0xBABE: "hao", 0xBAC7: "he", 0xBAD9: "hei", 0xBADB: "hen", 0xBADF: "heng", 0xBAE4: "hong", 0xBAED: "hou", 0xBAF4: "hu", 0xBBA8: "hua", 0xBBB1: "huai", 0xBBB6: "huan", 0xBBC4: "huang", 0xBBD2: "hui", 0xBBE7: "hun", 0xBBED: "huo", 0xBBF7: "ji", 0xBCCE: "jia", 0xBCDF: "jian", 0xBDA9: "jiang", 0xBDB6: "jiao", 0xBDD2: "jie", 0xBDED: "jin", 0xBEA3: "jing", 0xBEBC: "jiong", 0xBEBE: "jiu", 0xBECF: "ju", 0xBEE8: "juan", 0xBEEF: "jue", 0xBEF9: "jun", 0xBFA6: "ka", 0xBFAA: "kai", 0xBFAF: "kan", 0xBFB5: "kang", 0xBFBC: "kao", 0xBfc0: "ke", 0xBFCF: "ken", 0xBFD3: "keng", 0xBFD5: "kong", 0xBFD9: "kou", 0xBFDD: "ku", 0xBFE4: "kua", 0xBFE9: "kuai", 0xBFED: "kuan", 0xBFEF: "kuang", 0xBFF7: "kui", 0xC0A4: "kun", 0xC0A8: "kuo", 0xC0AC: "la", 0xC0B3: "lai", 0xC0B6: "lan", 0xC0C5: "lang", 0xC0CC: "lao", 0xC0D5: "le", 0xC0D7: "lei", 0xC0E2: "leng", 0xC0E5: "li", 0xC1A9: "lia", 0xC1AA: "lian", 0xC1B8: "liang", 0xC1C3: "liao", 0xC1D0: "lie", 0xC1D5: "lin", 0xC1E1: "ling", 0xC1EF: "liu", 0xC1FA: "long", 0xC2A5: "lou", 0xC2AB: "lu", 0xC2BF: "lv", 0xC2CD: "luan", 0xC2D3: "lue", 0xC2D5: "lun", 0xC2DC: "luo", 0xC2E8: "ma", 0xC2F1: "mai", 0xC2F7: "man", 0xC3A2: "mang", 0xC3A8: "mao", 0xC3B4: "me", 0xC3B5: "mei", 0xC3C5: "men", 0xC3C8: "meng", 0xC3D0: "mi", 0xC3DE: "mian", 0xC3E7: "miao", 0xC3EF: "mie", 0xC3F1: "min", 0xC3F7: "ming", 0xC3FD: "miu", 0xC3FE: "mo", 0xC4B1: "mou", 0xC4B4: "mu", 0xC4C3: "na", 0xC4CA: "nai", 0xC4CF: "nan", 0xC4D2: "nang", 0xC4D3: "nao", 0xC4D8: "ne", 0xC4D9: "nei", 0xC4DB: "nen", 0xC4DC: "neng", 0xC4DD: "ni", 0xC4E8: "nian", 0xC4EF: "niang", 0xC4F1: "niao", 0xC4F3: "nie", 0xC4FA: "nin", 0xC4FB: "ning", 0xC5A3: "niu", 0xC5A7: "nong", 0xC5AB: "nu", 0xC5AE: "nv", 0xC5AF: "nuan", 0xC5B0: "nue", 0xC5B2: "nuo", 0xC5B6: "o", 0xC5B7: "ou", 0xC5BE: "pa", 0xC5C4: "pai", 0xC5CA: "pan", 0xC5D2: "pang", 0xC5D7: "pao", 0xC5DE: "pei", 0xC5E7: "pen", 0xC5E9: "peng", 0xC5F7: "pi", 0xC6AA: "pian", 0xC6AE: "piao", 0xC6B2: "pie", 0xC6B4: "pin", 0xC6B9: "ping", 0xC6C2: "po", 0xC6CB: "pu", 0xC6DA: "qi", 0xC6FE: "qia", 0xC7A3: "qian", 0xC7B9: "qiang", 0xC7C1: "qiao", 0xC7D0: "qie", 0xC7D5: "qin", 0xC7E0: "qing", 0xC7ED: "qiong", 0xC7EF: "qiu", 0xC7F7: "qu", 0xC8A6: "quan", 0xC8B1: "que", 0xC8B9: "qun", 0xC8BB: "ran", 0xC8BF: "rang", 0xC8C4: "rao", 0xC8C7: "re", 0xC8C9: "ren", 0xC8D3: "reng", 0xC8D5: "ri", 0xC8D6: "rong", 0xC8E0: "rou", 0xC8E3: "ru", 0xC8ED: "ruan", 0xC8EF: "rui", 0xC8F2: "run", 0xC8F4: "ruo", 0xC8F6: "sa", 0xC8F9: "sai", 0xC8FD: "san", 0xC9A3: "sang", 0xC9A6: "sao", 0xC9AA: "se", 0xC9AD: "sen", 0xC9AE: "seng", 0xC9AF: "sha", 0xC9B8: "shai", 0xC9BA: "shan", 0xC9CA: "shang", 0xC9D2: "shao", 0xC9DD: "she", 0xC9E9: "shen", 0xC9F9: "sheng", 0xCAA6: "shi", 0xCAD5: "shou", 0xCADF: "shu", 0xCBA2: "shua", 0xCBA4: "shuai", 0xCBA8: "shuan", 0xCBAA: "shuang", 0xCBAD: "shui", 0xCBB1: "shun", 0xCBB5: "shuo", 0xCBB9: "si", 0xCBC9: "song", 0xCBD1: "sou", 0xCBD4: "su", 0xCBE1: "suan", 0xCBE4: "sui", 0xCBEF: "sun", 0xCBF2: "suo", 0xCBFA: "ta", 0xCCA5: "tai", 0xCCAE: "tan", 0xCCC0: "tang", 0xCCCD: "tao", 0xCCD8: "te", 0xCCD9: "teng", 0xCCDD: "ti", 0xCCEC: "tian", 0xCCF4: "tiao", 0xCCF9: "tie", 0xCCFC: "ting", 0xCDA8: "tong", 0xCDB5: "tou", 0xCDB9: "tu", 0xCDC4: "tuan", 0xCDC6: "tui", 0xCDCC: "tun", 0xCDCF: "tuo", 0xCDDA: "wa", 0xCDE1: "wai", 0xCDE3: "wan", 0xCDF4: "wang", 0xCDFE: "wei", 0xCEC1: "wen", 0xCECB: "weng", 0xCECE: "wo", 0xCED7: "wu", 0xCEF4: "xi", 0xCFB9: "xia", 0xCFC6: "xian", 0xCFE0: "xiang", 0xCFF4: "xiao", 0xD0A8: "xie", 0xD0BD: "xin", 0xD0C7: "xing", 0xD0D6: "xiong", 0xD0DD: "xiu", 0xD0E6: "xu", 0xD0F9: "xuan", 0xD1A5: "xue", 0xD1AB: "xun", 0xD1B9: "ya", 0xD1C9: "yan", 0xD1EA: "yang", 0xD1FB: "yao", 0xD2AC: "ye", 0xD2BB: "yi", 0xD2F0: "yin", 0xD3A2: "ying", 0xD3B4: "yo", 0xD3B5: "yong", 0xD3C4: "you", 0xD3D9: "yu", 0xD4A7: "yuan", 0xD4BB: "yue", 0xD4C5: "yun", 0xD4D1: "za", 0xD4D4: "zai", 0xD4DB: "zan", 0xD4DF: "zang", 0xD4E2: "zao", 0xD4F0: "ze", 0xD4F4: "zei", 0xD4F5: "zen", 0xD4F6: "zeng", 0xD4FA: "zha", 0xD5AA: "zhai", 0xD5B0: "zhan", 0xD5C1: "zhang", 0xD5D0: "zhao", 0xD5DA: "zhe", 0xD5E4: "zhen", 0xD5F4: "zheng", 0xD6A5: "zhi", 0xD6D0: "zhong", 0xD6DB: "zhou", 0xD6E9: "zhu", 0xD7A5: "zhua", 0xD7A7: "zhuai", 0xD7A8: "zhuan", 0xD7AE: "zhuang", 0xD7B5: "zhui", 0xD7BB: "zhun", 0xD7BD: "zhuo", 0xD7C8: "zi", 0xD7D7: "zong", 0xD7DE: "zou", 0xD7E2: "zu", 0xD7EA: "zuan", 0xD7EC: "zui", 0xD7F0: "zun", 0xD7F2: "zuo" }; var spellArray = new Array(); var pn = ""; function pinyin(char) { if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328) return char; if (spellArray[char.charCodeAt(0)]) return spellArray[char.charCodeAt(0)] execScript("ascCode=hex(asc(/"" + char + "/"))", "vbscript"); ascCode = eval("0x" + ascCode); if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3)) return char; for (var i = ascCode;(!spell[i] && i > 0);) i--; return spell[i]; } function toPinyin(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += "<br>" else pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>" // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function toPinyinOnly(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += "<br>" else pStr += pinyin(str.charAt(i)); //pStr += " " + pinyin(str.charAt(i)); // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function toPinyinShengmu(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += ""; else pStr += pinyin(str.charAt(i)).charAt(0); // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function pinyinSort(a, b) { var rValue = 0 for (var i = 0; i < a.length; i++) { var pinA = pinyin(a.charAt(i)) var pinB = pinyin(b.charAt(i)) if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0) break } return rValue } index.html [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>
最近在ie8碰到一个js问题，需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容，原来的combobox只能支持汉字输入检索，现在需要进行改进，现在我将一步一步的实现方法记录下来，功能简单，也可能有bug和不足，供学习参考。(本文只是提供思路学习和备份，实际情况需要在ie8或者ie兼容模式上使用，所以没有考虑到别的浏览器)
目录结构：
test
|--js
|--index.html
在index页面中添加
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/autoComplete.js" ></script> <script type="text/javascript"> </script> </head> <body> <input type="text" id="txtDisplay" /> <select id="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> <option value="5">重庆</option> <option value="6">天津</option> <option value="7">沈阳</option> <option value="8">南京</option> <option value="9">武汉</option> <option value="10">长春</option> <option value="11">成都</option> <option value="12">大连</option> <option value="13">杭州</option> <option value="14">青岛</option> <option value="15">a济南</option> <option value="16">厦门</option> <option value="17">福州</option> <option value="18">西安</option> <option value="19">长沙</option> <option value="20">哈尔滨</option> </select> </body> </html>
效果：开始将select 的下拉列表框隐藏，当点击input文本框的时候显示到input框的下面，选择完成后再将select隐藏。
js实现：
如果一个页面有多个地方需要实现这样的功能，这个时候就要使用面向对象的思维，尽可能代码重用，我们需要自定义一个ap这样的集合。
autoComplete.js
function Map() { /** 存放键的数组(遍历用到) */ this.keys = new Array(); /** 存放数据 */ this.data = new Object(); /** * 放入一个键值对 * @param {String} key * @param {Object} value */ this.put = function(key, value) { if(this.data[key] == null){ this.keys.push(key); } this.data[key] = value; }; /** * 获取某键对应的值 * @param {String} key * @return {Object} value */ this.get = function(key) { return this.data[key]; }; /** * 删除一个键值对 * @param {String} key */ this.remove = function(key) { this.keys.remove(key); this.data[key] = null; }; /** * 遍历Map,执行处理函数 * * @param {Function} 回调函数 function(key,value,index){..} */ this.each = function(fn){ if(typeof fn != 'function'){ return; } var len = this.keys.length; for(var i=0;i<len;i++){ var k = this.keys[i]; fn(k,this.data[k],i); } }; /** * 获取键值数组(类似Java的entrySet()) * @return 键值对象{key,value}的数组 */ this.entrys = function() { var len = this.keys.length; var entrys = new Array(len); for (var i = 0; i < len; i++) { entrys[i] = { key : this.keys[i], value : this.data[i] }; } return entrys; }; /** * 判断Map是否为空 */ this.isEmpty = function() { return this.keys.length == 0; }; /** * 获取键值对数量 */ this.size = function(){ return this.keys.length; }; /** * 重写toString */ this.toString = function(){ var s = "{"; for(var i=0;i<this.keys.length;i++,s+=','){ var k = this.keys[i]; s += k+"="+this.data[k]; } s+="}"; return s; }; } Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } 现在我们要写一个程序加载入口文件，用来将input和select的对象传入，然后进行事件绑定等等一系列的操作。
var autoCompleteMap = new Map(); //组件容器，便于组件事件驱动时调用，同时支持多组件管理 var splitFleg = "_"; //分隔符 /** * 文本框，下拉框组合成自动补全组件 * @param {Object} txtObj 文本框对象 * @param {Object} selectObj 下拉框对象 * @param {int} selectSize 显示下拉框的数量 * @param {int} selectLength 下拉框的长度 */ function AutoComplete(txtObj, selectObj, selectSize, selectLength) { this.cacheContainer = new Array(); //缓存容器，用来在页面刚刚加载的时候将option中的内容缓存到cacheContainer中 this.init = function() { this.initCache(); //缓存数据，将option的数据缓存到cacheContainer this.initCSS(); //初始化css 将select隐藏 this.registerEvent(); //注册事件 this.setSelectIdPosition(); //设置select的位置 // 缓存当前组件，便于组件事件驱动时调用，同时支持多组件管理 autoCompleteMap.put(txtObj.id + selectObj.id, this); // 界面刷新后,将直属机构下拉框text值,写入文本框 var selectIndex = selectObj.selectedIndex; if (selectIndex > 0) //第一个内容一般是 【请选择】，如果没有则将>0改为>=0 txtObj.value = selectObj.options[selectIndex].text; } //缓存数据，将option的数据缓存到cacheContainer this.initCache = function() { var select_options = selectObj.options; if (select_options == null || select_options.length == 0) { return; } this.cacheContainer = []; for (var i = 0; i < select_options.length; i++) { this.cacheContainer[i] = select_options[i].text + splitFleg + select_options[i].value; } } this.initCSS = function() { selectObj.style.display = "none"; selectObj.style.position = "absolute"; selectObj.style.zIndex = 2; selectObj.style.width = selectLength + "px"; selectObj.multiple = "multiple"; txtObj.style.width = selectLength - 5 + "px"; } this.registerEvent = function() { // 下拉框事件 selectObj.ondblclick = this.doubleClickEvent; selectObj.onkeyup = this.keyupEvent; selectObj.onblur = this.OnblurEvent; selectObj.onfocus = this.OnfocusEvent; // 文本框事件 txtObj.onfocus = this.OnfocusEvent; txtObj.onblur = this.OnblurEvent; txtObj.onkeyup = this.txtObjKeyupEvent; } this.setSelectIdPosition = function() { var position = this.findPosition(txtObj); selectObj.style.left = position[0] + "px"; selectObj.style.top = position[3] + 3 + "px"; } this.findPosition = function(oElement) { var x2 = 0; var y2 = 0; var width = oElement.offsetWidth; var height = oElement.offsetHeight; if (typeof(oElement.offsetParent) != 'undefined') { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x2 = posX + width; y2 = posY + height; return [posX, posY, x2, y2]; } else { x2 = oElement.x + width; y2 = oElement.y + height; return [oElement.x, oElement.y, x2, y2]; } } //-----------------绑定的事件------------------------ /** * select下拉列表框双击事件 */ this.doubleClickEvent = function() { selectObj.style.display = "none"; var selectIndex = selectObj.selectedIndex; txtObj.value = selectObj.options[selectIndex].text; } /** * 鼠标点击松开事件 */ this.keyupEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 13) { event.returnValue = false; var srcElem = document.activeElement; //获取当前聚焦的对象 var testval = srcElem.id; if (testval == selectObj.id) { autocomplete.doubleClickEvent(); } } } /** * 聚焦事件 */ this.OnblurEvent = function() { var srcElem = document.activeElement; var testval = srcElem.id; if (testval != selectObj.id && testval != txtObj.id) { //如果没有聚焦到当前input框或者select列表 selectObj.style.display = "none"; //将select列表隐藏 } } /** * 聚焦事件 */ this.OnfocusEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); autocomplete.setSelectIdPosition(); var srcElem = document.activeElement; var testval = srcElem.id; if (testval == selectObj.id || testval == txtObj.id) { //聚焦在当前对象 if (txtObj.value.length != 0) { //当input框中存在字符，则不进行任何操作 return; } var selectIdLength = selectObj.options.length; if (selectIdLength > selectSize) { selectObj.size = selectSize; } else { selectObj.size = selectIdLength; } selectObj.style.display = "block"; } } var myTimeout = null; /** * 文本框鼠标聚焦松开事件 ，设置一个定时器，每个特定的时间执行函数，查询和input框中匹配到的select列表数据并显示 */ this.txtObjKeyupEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 40) { //input框中点击键盘方向键下，这个时候不需要进行检索，只有在输入的时候触发检索事件 var srcElem = document.activeElement; var testval = srcElem.id; if (testval == txtObj.id) { selectObj.focus(); if (selectObj.options.length >= 1) selectObj.options[0].selected = true; } return; } if (autocomplete.myTimeout != null) { //清空设置的定时执行事件 clearTimeout(autocomplete.myTimeout); } autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200); } //----------------------------检索显示匹配数据----------------------------- /** * 做主要的查询匹配操作 */ this.doAJAX = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); //清空原来的OPTIONS autocomplete.clearAllOptions(); autocomplete.setSelectIdPosition(); var inputStr = txtObj.value; var arrays = autocomplete.compareInput(inputStr); //匹配符合查询条件的数据 if (arrays == null || arrays.length == 0) { selectObj.style.display = "none"; return; } selectObj.style.display = "block"; for (var i = 0; i < arrays.length; i++) { var optionParams = arrays[i].split(splitFleg); var opt = new Option(); opt.text = optionParams[0]; opt.value = optionParams[1]; selectObj.add(opt); } if (arrays.length > selectSize) { selectObj.size = selectSize; } else { selectObj.size = arrays.length; } } /** * 清空原来的OPTIONS */ this.clearAllOptions = function() { //清空原来的OPTIONS var nL = selectObj.options.length; while (nL > 0) { selectObj.remove(selectObj.options.length - 1); nL = selectObj.options.length; } } //--------------------------数据检索规则--------------------- /** * 数据检索规则 * @param {String} inputStr input框中需要进行匹配的条件 */ this.compareInput = function(inputStr) { if (this.cacheContainer.length == 0) { return; } inputStr = inputStr.replace(/(^[/s]*)/g, ""); //去前边空白字符串 inputStr = this.deleteSpecialSpace(inputStr); //去除特殊空白字符串 if (inputStr == null || inputStr.length == 0) { return this.cacheContainer; } inputStr = disableSpecialCharacter(inputStr); //特殊字符处理 var resultArray = new Array(); var k = 0; var selectText = ""; for (var i = 0; i < this.cacheContainer.length; i++) { selectText = (this.cacheContainer[i].split(splitFleg)[0]).replace(/(^[/s]*)/g, ""); selectText = this.deleteSpecialSpace(selectText); if (compareRules(inputStr, selectText)) { //匹配规则 resultArray[k] = this.cacheContainer[i]; k++; } } return uniqueArray(resultArray); } /** * 去除特殊空白字符串 */ this.deleteSpecialSpace = function(srcStr) { var temp = ""; for (var i = 0; i < srcStr.length; i++) { var charStr = srcStr.charAt(i); // 界面特殊空格Unicode=160，此空格既不是全角，也非半角 if (charStr.charCodeAt(0) == 160) { continue; } temp += charStr; } return temp; } } /** * @param {String} inputStr 需要进行过滤的字符 * 特殊字符处理 */ function disableSpecialCharacter(inputStr) { inputStr = inputStr.replace(new RegExp("////", 'g'), "////"); inputStr = inputStr.replace(new RegExp("//.", 'g'), "//."); inputStr = inputStr.replace(new RegExp("//^", 'g'), "//^"); inputStr = inputStr.replace(new RegExp("//{", 'g'), "//{"); inputStr = inputStr.replace(new RegExp("//[", 'g'), "//["); inputStr = inputStr.replace(new RegExp("//(", 'g'), "//("); inputStr = inputStr.replace(new RegExp("//|", 'g'), "//|"); inputStr = inputStr.replace(new RegExp("//]", 'g'), "//]"); inputStr = inputStr.replace(new RegExp("//)", 'g'), "//)"); inputStr = inputStr.replace(new RegExp("//*", 'g'), "//*"); inputStr = inputStr.replace(new RegExp("//+", 'g'), "//+"); inputStr = inputStr.replace(new RegExp("//?", 'g'), "//?"); return inputStr; } /** * 匹配规则 * @param {String} inputStr input框字符，匹配条件 * @param {String} selectText 被匹配文字 */ function compareRules(inputStr, selectText) { //匹配汉字 return selectText.indexOf(inputStr) != -1 ; } /** * 过滤重复数据 * @param {Object} arr 结果数组 */ function uniqueArray(arr) { if(arr == null || arr.length == 0){ return arr; } return arr.reverse().join(",").match( /([^,]+)(?!.*/1)/ig).reverse(); } /** * 在原来onload的基础上加上自定义要执行的函数 * @param {Object} func 加载函数 */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
引入将汉字转换成拼音的工具js
pinYinHanZi.js
/** * 汉子转换成拼音工具js */ var key2code = { 65: "a", 66: "b", 67: "c", 68: "d", 69: "e", 70: "f", 71: "g", 72: "h", 73: "i", 74: "j", 75: "k", 76: "l", 77: "m", 78: "n", 79: "o", 80: "p", 81: "q", 82: "r", 83: "s", 84: "t", 85: "u", 86: "v", 87: "w", 88: "x", 89: "y", 90: "z", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: "6", 55: "7", 56: "8", 57: "9", 48: "0" }; var spell = { 0xB0A1: "a", 0xB0A3: "ai", 0xB0B0: "an", 0xB0B9: "ang", 0xB0BC: "ao", 0xB0C5: "ba", 0xB0D7: "bai", 0xB0DF: "ban", 0xB0EE: "bang", 0xB0FA: "bao", 0xB1AD: "bei", 0xB1BC: "ben", 0xB1C0: "beng", 0xB1C6: "bi", 0xB1DE: "bian", 0xB1EA: "biao", 0xB1EE: "bie", 0xB1F2: "bin", 0xB1F8: "bing", 0xB2A3: "bo", 0xB2B8: "bu", 0xB2C1: "ca", 0xB2C2: "cai", 0xB2CD: "can", 0xB2D4: "cang", 0xB2D9: "cao", 0xB2DE: "ce", 0xB2E3: "ceng", 0xB2E5: "cha", 0xB2F0: "chai", 0xB2F3: "chan", 0xB2FD: "chang", 0xB3AC: "chao", 0xB3B5: "che", 0xB3BB: "chen", 0xB3C5: "cheng", 0xB3D4: "chi", 0xB3E4: "chong", 0xB3E9: "chou", 0xB3F5: "chu", 0xB4A7: "chuai", 0xB4A8: "chuan", 0xB4AF: "chuang", 0xB4B5: "chui", 0xB4BA: "chun", 0xB4C1: "chuo", 0xB4C3: "ci", 0xB4CF: "cong", 0xB4D5: "cou", 0xB4D6: "cu", 0xB4DA: "cuan", 0xB4DD: "cui", 0xB4E5: "cun", 0xB4E8: "cuo", 0xB4EE: "da", 0xB4F4: "dai", 0xB5A2: "dan", 0xB5B1: "dang", 0xB5B6: "dao", 0xB5C2: "de", 0xB5C5: "deng", 0xB5CC: "di", 0xB5DF: "dian", 0xB5EF: "diao", 0xB5F8: "die", 0xB6A1: "ding", 0xB6AA: "diu", 0xB6AB: "dong", 0xB6B5: "dou", 0xB6BC: "du", 0xB6CB: "duan", 0xB6D1: "dui", 0xB6D5: "dun", 0xB6DE: "duo", 0xB6EA: "e", 0xB6F7: "en", 0xB6F8: "er", 0xB7A2: "fa", 0xB7AA: "fan", 0xB7BB: "fang", 0xB7C6: "fei", 0xB7D2: "fen", 0xB7E1: "feng", 0xB7F0: "fo", 0xB7F1: "fou", 0xB7F2: "fu", 0xB8C1: "ga", 0xB8C3: "gai", 0xB8C9: "gan", 0xB8D4: "gang", 0xB8DD: "gao", 0xB8E7: "ge", 0xB8F8: "gei", 0xB8F9: "gen", 0xB8FB: "geng", 0xB9A4: "gong", 0xB9B3: "gou", 0xB9BC: "gu", 0xB9CE: "gua", 0xB9D4: "guai", 0xB9D7: "guan", 0xB9E2: "guang", 0xB9E5: "gui", 0xB9F5: "gun", 0xB9F8: "guo", 0xB9FE: "ha", 0xBAA1: "hai", 0xBAA8: "han", 0xBABB: "hang", 0xBABE: "hao", 0xBAC7: "he", 0xBAD9: "hei", 0xBADB: "hen", 0xBADF: "heng", 0xBAE4: "hong", 0xBAED: "hou", 0xBAF4: "hu", 0xBBA8: "hua", 0xBBB1: "huai", 0xBBB6: "huan", 0xBBC4: "huang", 0xBBD2: "hui", 0xBBE7: "hun", 0xBBED: "huo", 0xBBF7: "ji", 0xBCCE: "jia", 0xBCDF: "jian", 0xBDA9: "jiang", 0xBDB6: "jiao", 0xBDD2: "jie", 0xBDED: "jin", 0xBEA3: "jing", 0xBEBC: "jiong", 0xBEBE: "jiu", 0xBECF: "ju", 0xBEE8: "juan", 0xBEEF: "jue", 0xBEF9: "jun", 0xBFA6: "ka", 0xBFAA: "kai", 0xBFAF: "kan", 0xBFB5: "kang", 0xBFBC: "kao", 0xBFC0: "ke", 0xBFCF: "ken", 0xBFD3: "keng", 0xBFD5: "kong", 0xBFD9: "kou", 0xBFDD: "ku", 0xBFE4: "kua", 0xBFE9: "kuai", 0xBFED: "kuan", 0xBFEF: "kuang", 0xBFF7: "kui", 0xC0A4: "kun", 0xC0A8: "kuo", 0xC0AC: "la", 0xC0B3: "lai", 0xC0B6: "lan", 0xC0C5: "lang", 0xC0CC: "lao", 0xC0D5: "le", 0xC0D7: "lei", 0xC0E2: "leng", 0xC0E5: "li", 0xC1A9: "lia", 0xC1AA: "lian", 0xC1B8: "liang", 0xC1C3: "liao", 0xC1D0: "lie", 0xC1D5: "lin", 0xC1E1: "ling", 0xC1EF: "liu", 0xC1FA: "long", 0xC2A5: "lou", 0xC2AB: "lu", 0xC2BF: "lv", 0xC2CD: "luan", 0xC2D3: "lue", 0xC2D5: "lun", 0xC2DC: "luo", 0xC2E8: "ma", 0xC2F1: "mai", 0xC2F7: "man", 0xC3A2: "mang", 0xC3A8: "mao", 0xC3B4: "me", 0xC3B5: "mei", 0xC3C5: "men", 0xC3C8: "meng", 0xC3D0: "mi", 0xC3DE: "mian", 0xC3E7: "miao", 0xC3EF: "mie", 0xC3F1: "min", 0xC3F7: "ming", 0xC3FD: "miu", 0xC3FE: "mo", 0xC4B1: "mou", 0xC4B4: "mu", 0xC4C3: "na", 0xC4CA: "nai", 0xC4CF: "nan", 0xC4D2: "nang", 0xC4D3: "nao", 0xC4D8: "ne", 0xC4D9: "nei", 0xC4DB: "nen", 0xC4DC: "neng", 0xC4DD: "ni", 0xC4E8: "nian", 0xC4EF: "niang", 0xC4F1: "niao", 0xC4F3: "nie", 0xC4FA: "nin", 0xC4FB: "ning", 0xC5A3: "niu", 0xC5A7: "nong", 0xC5AB: "nu", 0xC5AE: "nv", 0xC5AF: "nuan", 0xC5B0: "nue", 0xC5B2: "nuo", 0xC5B6: "o", 0xC5B7: "ou", 0xC5BE: "pa", 0xC5C4: "pai", 0xC5CA: "pan", 0xC5D2: "pang", 0xC5D7: "pao", 0xC5DE: "pei", 0xC5E7: "pen", 0xC5E9: "peng", 0xC5F7: "pi", 0xC6AA: "pian", 0xC6AE: "piao", 0xC6B2: "pie", 0xC6B4: "pin", 0xC6B9: "ping", 0xC6C2: "po", 0xC6CB: "pu", 0xC6DA: "qi", 0xC6FE: "qia", 0xC7A3: "qian", 0xC7B9: "qiang", 0xC7C1: "qiao", 0xC7D0: "qie", 0xC7D5: "qin", 0xC7E0: "qing", 0xC7ED: "qiong", 0xC7EF: "qiu", 0xC7F7: "qu", 0xC8A6: "quan", 0xC8B1: "que", 0xC8B9: "qun", 0xC8BB: "ran", 0xC8BF: "rang", 0xC8C4: "rao", 0xC8C7: "re", 0xC8C9: "ren", 0xC8D3: "reng", 0xC8D5: "ri", 0xC8D6: "rong", 0xC8E0: "rou", 0xC8E3: "ru", 0xC8ED: "ruan", 0xC8EF: "rui", 0xC8F2: "run", 0xC8F4: "ruo", 0xC8F6: "sa", 0xC8F9: "sai", 0xC8FD: "san", 0xC9A3: "sang", 0xC9A6: "sao", 0xC9AA: "se", 0xC9AD: "sen", 0xC9AE: "seng", 0xC9AF: "sha", 0xC9B8: "shai", 0xC9BA: "shan", 0xC9CA: "shang", 0xC9D2: "shao", 0xC9DD: "she", 0xC9E9: "shen", 0xC9F9: "sheng", 0xCAA6: "shi", 0xCAD5: "shou", 0xCADF: "shu", 0xCBA2: "shua", 0xCBA4: "shuai", 0xCBA8: "shuan", 0xCBAA: "shuang", 0xCBAD: "shui", 0xCBB1: "shun", 0xCBB5: "shuo", 0xCBB9: "si", 0xCBC9: "song", 0xCBD1: "sou", 0xCBD4: "su", 0xCBE1: "suan", 0xCBE4: "sui", 0xCBEF: "sun", 0xCBF2: "suo", 0xCBFA: "ta", 0xCCA5: "tai", 0xCCAE: "tan", 0xCCC0: "tang", 0xCCCD: "tao", 0xCCD8: "te", 0xCCD9: "teng", 0xCCDD: "ti", 0xCCEC: "tian", 0xCCF4: "tiao", 0xCCF9: "tie", 0xCCFC: "ting", 0xCDA8: "tong", 0xCDB5: "tou", 0xCDB9: "tu", 0xCDC4: "tuan", 0xCDC6: "tui", 0xCDCC: "tun", 0xCDCF: "tuo", 0xCDDA: "wa", 0xCDE1: "wai", 0xCDE3: "wan", 0xCDF4: "wang", 0xCDFE: "wei", 0xCEC1: "wen", 0xCECB: "weng", 0xCECE: "wo", 0xCED7: "wu", 0xCEF4: "xi", 0xCFB9: "xia", 0xCFC6: "xian", 0xCFE0: "xiang", 0xCFF4: "xiao", 0xD0A8: "xie", 0xD0BD: "xin", 0xD0C7: "xing", 0xD0D6: "xiong", 0xD0DD: "xiu", 0xD0E6: "xu", 0xD0F9: "xuan", 0xD1A5: "xue", 0xD1AB: "xun", 0xD1B9: "ya", 0xD1C9: "yan", 0xD1EA: "yang", 0xD1FB: "yao", 0xD2AC: "ye", 0xD2BB: "yi", 0xD2F0: "yin", 0xD3A2: "ying", 0xD3B4: "yo", 0xD3B5: "yong", 0xD3C4: "you", 0xD3D9: "yu", 0xD4A7: "yuan", 0xD4BB: "yue", 0xD4C5: "yun", 0xD4D1: "za", 0xD4D4: "zai", 0xD4DB: "zan", 0xD4DF: "zang", 0xD4E2: "zao", 0xD4F0: "ze", 0xD4F4: "zei", 0xD4F5: "zen", 0xD4F6: "zeng", 0xD4FA: "zha", 0xD5AA: "zhai", 0xD5B0: "zhan", 0xD5C1: "zhang", 0xD5D0: "zhao", 0xD5DA: "zhe", 0xD5E4: "zhen", 0xD5F4: "zheng", 0xD6A5: "zhi", 0xD6D0: "zhong", 0xD6DB: "zhou", 0xD6E9: "zhu", 0xD7A5: "zhua", 0xD7A7: "zhuai", 0xD7A8: "zhuan", 0xD7AE: "zhuang", 0xD7B5: "zhui", 0xD7BB: "zhun", 0xD7BD: "zhuo", 0xD7C8: "zi", 0xD7D7: "zong", 0xD7DE: "zou", 0xD7E2: "zu", 0xD7EA: "zuan", 0xD7EC: "zui", 0xD7F0: "zun", 0xD7F2: "zuo" }; var spellArray = new Array(); var pn = ""; function pinyin(char) { if (!char.charCodeAt(0) || char.charCodeAt(0) < 1328) return char; if (spellArray[char.charCodeAt(0)]) return spellArray[char.charCodeAt(0)] execScript("ascCode=hex(asc(/"" + char + "/"))", "vbscript"); ascCode = eval("0x" + ascCode); if (!(ascCode > 0xB0A0 && ascCode < 0xD7F3)) return char; for (var i = ascCode;(!spell[i] && i > 0);) i--; return spell[i]; } function toPinyin(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += "<br>" else pStr += "<ruby style='ruby-align:center'> " + str.charAt(i) + " <rt>" + pinyin(str.charAt(i)) + "</rt></ruby>" // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function toPinyinOnly(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += "<br>" else pStr += pinyin(str.charAt(i)); //pStr += " " + pinyin(str.charAt(i)); // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function toPinyinShengmu(str) { var pStr = "" for (var i = 0; i < str.length; i++) { if (str.charAt(i) == "/n") pStr += ""; else pStr += pinyin(str.charAt(i)).charAt(0); // else pStr += pinyin(str.charAt(i)) + " " } return pStr; } function pinyinSort(a, b) { var rValue = 0 for (var i = 0; i < a.length; i++) { var pinA = pinyin(a.charAt(i)) var pinB = pinyin(b.charAt(i)) if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0) break } return rValue } index.html [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> 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例在IE8上JS实现combobox支持拼音检索功能全部内容，希望文章能够帮你解决js实例在IE8上JS实现combobox支持拼音检索功能所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。