在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
更新時(shí)間：2016年05月23日 09:49:29 作者：指尖殘雪
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下
最近在ie8碰到一個(gè)js問題，需要實(shí)現(xiàn)(ie8)使用拼音或者拼音首字母來檢索select中的內(nèi)容，原來的combobox只能支持漢字輸入檢索，現(xiàn)在需要進(jìn)行改進(jìn)，現(xiàn)在我將一步一步的實(shí)現(xiàn)方法記錄下來，功能簡單，也可能有bug和不足，供學(xué)習(xí)參考。(本文只是提供思路學(xué)習(xí)和備份，實(shí)際情況需要在ie8或者ie兼容模式上使用，所以沒有考慮到別的瀏覽器)
目錄結(jié)構(gòu)：
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濟(jì)南</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 的下拉列表框隱藏，當(dāng)點(diǎn)擊input文本框的時(shí)候顯示到input框的下面，選擇完成后再將select隱藏。
js實(shí)現(xiàn)：
如果一個(gè)頁面有多個(gè)地方需要實(shí)現(xiàn)這樣的功能，這個(gè)時(shí)候就要使用面向?qū)ο蟮乃季S，盡可能代碼重用，我們需要自定義一個(gè)ap這樣的集合。
autoComplete.js
function Map() {
/** 存放鍵的數(shù)組(遍歷用到) */
this.keys = new Array();
/** 存放數(shù)據(jù) */
this.data = new Object();
/**
* 放入一個(gè)鍵值對
* @param {String} key
* @param {Object} value
*/
this.put = function(key, value) {
if(this.data[key] == null){
this.keys.push(key);
}
this.data[key] = value;
};
/**
* 獲取某鍵對應(yīng)的值
* @param {String} key
* @return {Object} value
*/
this.get = function(key) {
return this.data[key];
};
/**
* 刪除一個(gè)鍵值對
* @param {String} key
*/
this.remove = function(key) {
this.keys.remove(key);
this.data[key] = null;
};
/**
* 遍歷Map,執(zhí)行處理函數(shù)
*
* @param {Function} 回調(diào)函數(shù) 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);
}
};
/**
* 獲取鍵值數(shù)組(類似Java的entrySet())
* @return 鍵值對象{key,value}的數(shù)組
*/
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;
};
/**
* 獲取鍵值對數(shù)量
*/
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);
}
}
現(xiàn)在我們要寫一個(gè)程序加載入口文件，用來將input和select的對象傳入，然后進(jìn)行事件綁定等等一系列的操作。
var autoCompleteMap = new Map(); //組件容器，便于組件事件驅(qū)動時(shí)調(diào)用，同時(shí)支持多組件管理
var splitFleg = "_"; //分隔符
/**
* 文本框，下拉框組合成自動補(bǔ)全組件
* @param {Object} txtObj 文本框?qū)ο?
* @param {Object} selectObj 下拉框?qū)ο?
* @param {int} selectSize 顯示下拉框的數(shù)量
* @param {int} selectLength 下拉框的長度
*/
function AutoComplete(txtObj, selectObj, selectSize, selectLength) {
this.cacheContainer = new Array(); //緩存容器，用來在頁面剛剛加載的時(shí)候?qū)ption中的內(nèi)容緩存到cacheContainer中
this.init = function() {
this.initCache(); //緩存數(shù)據(jù)，將option的數(shù)據(jù)緩存到cacheContainer
this.initCSS(); //初始化css 將select隱藏
this.registerEvent(); //注冊事件
this.setSelectIdPosition(); //設(shè)置select的位置
// 緩存當(dāng)前組件，便于組件事件驅(qū)動時(shí)調(diào)用，同時(shí)支持多組件管理
autoCompleteMap.put(txtObj.id + selectObj.id, this);
// 界面刷新后,將直屬機(jī)構(gòu)下拉框text值,寫入文本框
var selectIndex = selectObj.selectedIndex;
if (selectIndex > 0) //第一個(gè)內(nèi)容一般是 【請選擇】，如果沒有則將>0改為>=0
txtObj.value = selectObj.options[selectIndex].text;
}
//緩存數(shù)據(jù)，將option的數(shù)據(jù)緩存到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;
}
/**
* 鼠標(biāo)點(diǎn)擊松開事件
*/
this.keyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 13) {
event.returnValue = false;
var srcElem = document.activeElement; //獲取當(dāng)前聚焦的對象
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) { //如果沒有聚焦到當(dāng)前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) { //聚焦在當(dāng)前對象
if (txtObj.value.length != 0) { //當(dāng)input框中存在字符，則不進(jìn)行任何操作
return;
}
var selectIdLength = selectObj.options.length;
if (selectIdLength > selectSize) {
selectObj.size = selectSize;
} else {
selectObj.size = selectIdLength;
}
selectObj.style.display = "block";
}
}
var myTimeout = null;
/**
* 文本框鼠標(biāo)聚焦松開事件 ，設(shè)置一個(gè)定時(shí)器，每個(gè)特定的時(shí)間執(zhí)行函數(shù)，查詢和input框中匹配到的select列表數(shù)據(jù)并顯示
*/
this.txtObjKeyupEvent = function() {
var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);
if (event.keyCode == 40) { //input框中點(diǎn)擊鍵盤方向鍵下，這個(gè)時(shí)候不需要進(jìn)行檢索，只有在輸入的時(shí)候觸發(fā)檢索事件
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) { //清空設(shè)置的定時(shí)執(zhí)行事件
clearTimeout(autocomplete.myTimeout);
}
autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200);
}
//----------------------------檢索顯示匹配數(shù)據(jù)-----------------------------
/**
* 做主要的查詢匹配操作
*/
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); //匹配符合查詢條件的數(shù)據(jù)
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;
}
}
//--------------------------數(shù)據(jù)檢索規(guī)則---------------------
/**
* 數(shù)據(jù)檢索規(guī)則
* @param {String} inputStr input框中需要進(jìn)行匹配的條件
*/
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)) { //匹配規(guī)則
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 需要進(jìn)行過濾的字符
* 特殊字符處理
*/
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;
}
/**
* 匹配規(guī)則
* @param {String} inputStr input框字符，匹配條件
* @param {String} selectText 被匹配文字
*/
function compareRules(inputStr, selectText) {
//匹配漢字
return selectText.indexOf(inputStr) != -1 ;
}
/**
* 過濾重復(fù)數(shù)據(jù)
* @param {Object} arr 結(jié)果數(shù)組
*/
function uniqueArray(arr) {
if(arr == null || arr.length == 0){
return arr;
}
return arr.reverse().join(",").match( /([^,]+)(?!.*\1)/ig).reverse();
}
/**
* 在原來onload的基礎(chǔ)上加上自定義要執(zhí)行的函數(shù)
* @param {Object} func 加載函數(shù)
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
引入將漢字轉(zhuǎn)換成拼音的工具js
pinYinHanZi.js
/**
* 漢子轉(zhuǎn)換成拼音工具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">
//自定義規(guī)則
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">濟(jì)南</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實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
javascript css在IE和Firefox中區(qū)別分析
我們討論的主題CSS網(wǎng)頁布局，最令大家頭疼的問題就是瀏覽器兼容性，雖然52CSS.com介紹過很多這方向的知識，但依然讓很多開發(fā)人員暈頭轉(zhuǎn)向，今天的這篇文章，將列出css和javascript在IE和Firefox中二十三個(gè)不同點(diǎn)，希望對大家的學(xué)習(xí)有所幫助。2009-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript原型與原型鏈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
日歷想必大家都比較熟悉吧，實(shí)現(xiàn)的方法有很多種，在本文大家將學(xué)會到如何使用js簡單實(shí)現(xiàn)日歷，感興趣的朋友可以了解下2013-10-10
js對table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2013-12-12
JavaScript計(jì)算兩個(gè)日期時(shí)間段內(nèi)日期的方法
這篇文章主要介紹了JavaScript計(jì)算兩個(gè)日期時(shí)間段內(nèi)日期的方法,涉及javascript操作時(shí)間的技巧,需要的朋友可以參考下2015-03-03
淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
深入理解JavaScript系列（16） 閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包（closure）。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table布局，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
這篇文章主要介紹了小程序圖片剪裁的示例代碼，可以通過手勢控制旋轉(zhuǎn)縮放移動，也可以點(diǎn)擊旋轉(zhuǎn)進(jìn)行90度旋轉(zhuǎn)，非常具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10