在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專(zhuān)欄 > 網(wǎng)絡(luò)編程

來(lái)源：易賢網(wǎng) 閱讀：1227 次日期：2016-06-25 11:58:14

溫馨提示：易賢網(wǎng)小編為您整理了“在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下

最近在ie8碰到一個(gè)js問(wèn)題，需要實(shí)現(xiàn)(ie8)使用拼音或者拼音首字母來(lái)檢索select中的內(nèi)容，原來(lái)的combobox只能支持漢字輸入檢索，現(xiàn)在需要進(jìn)行改進(jìn)，現(xiàn)在我將一步一步的實(shí)現(xiàn)方法記錄下來(lái)，功能簡(jiǎn)單，也可能有bug和不足，供學(xué)習(xí)參考。(本文只是提供思路學(xué)習(xí)和備份，實(shí)際情況需要在ie8或者ie兼容模式上使用，所以沒(méi)有考慮到別的瀏覽器)

目錄結(jié)構(gòu)：

test

|--js

|--index.html

在index頁(yè)面中添加

index.html

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

<option value="10">長(zhǎng)春</option>

<option value="19">長(zhǎng)沙</option>

</select>

</body>

</html>

效果：開(kāi)始將select 的下拉列表框隱藏，當(dāng)點(diǎn)擊input文本框的時(shí)候顯示到input框的下面，選擇完成后再將select隱藏。

js實(shí)現(xiàn)：

如果一個(gè)頁(yè)面有多個(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è)鍵值對(duì)

* @param {String} key

* @param {Object} value

this.put = function(key, value) {

if(this.data[key] == null){

this.keys.push(key);

}

this.data[key] = value;

};

/**

* 獲取某鍵對(duì)應(yīng)的值

* @param {String} key

* @return {Object} value

this.get = function(key) {

return this.data[key];

};

/**

* 刪除一個(gè)鍵值對(duì)

* @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ù)組(類(lèi)似Java的entrySet())

* @return 鍵值對(duì)象{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;

};

/**

* 獲取鍵值對(duì)數(shù)量

this.size = function(){

return this.keys.length;

};

/**

* 重寫(xiě)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)在我們要寫(xiě)一個(gè)程序加載入口文件，用來(lái)將input和select的對(duì)象傳入，然后進(jìn)行事件綁定等等一系列的操作。

var autoCompleteMap = new Map(); //組件容器，便于組件事件驅(qū)動(dòng)時(shí)調(diào)用，同時(shí)支持多組件管理

var splitFleg = "_"; //分隔符

/**

* 文本框，下拉框組合成自動(dòng)補(bǔ)全組件

* @param {Object} txtObj 文本框?qū)ο?nbsp;

* @param {Object} selectObj 下拉框?qū)ο?nbsp;

* @param {int} selectSize 顯示下拉框的數(shù)量

* @param {int} selectLength 下拉框的長(zhǎng)度

function AutoComplete(txtObj, selectObj, selectSize, selectLength) {

this.cacheContainer = new Array(); //緩存容器，用來(lái)在頁(yè)面剛剛加載的時(shí)候?qū)ption中的內(nèi)容緩存到cacheContainer中

this.init = function() {

this.initCache(); //緩存數(shù)據(jù)，將option的數(shù)據(jù)緩存到cacheContainer

this.initCSS(); //初始化css 將select隱藏

this.registerEvent(); //注冊(cè)事件

this.setSelectIdPosition(); //設(shè)置select的位置

// 緩存當(dāng)前組件，便于組件事件驅(qū)動(dòng)時(shí)調(diào)用，同時(shí)支持多組件管理

autoCompleteMap.put(txtObj.id + selectObj.id, this);

// 界面刷新后,將直屬機(jī)構(gòu)下拉框text值,寫(xiě)入文本框

var selectIndex = selectObj.selectedIndex;

if (selectIndex > 0) //第一個(gè)內(nèi)容一般是【請(qǐng)選擇】，如果沒(mé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)擊松開(kāi)事件

this.keyupEvent = function() {

var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id);

if (event.keyCode == 13) {

event.returnValue = false;

var srcElem = document.activeElement; //獲取當(dāng)前聚焦的對(duì)象

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) { //如果沒(méi)有聚焦到當(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)前對(duì)象

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)聚焦松開(kāi)事件，設(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)擊鍵盤(pá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);

//清空原來(lái)的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;

}

/**

* 清空原來(lái)的OPTIONS

this.clearAllOptions = function() {

//清空原來(lái)的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)行過(guò)濾的字符

* 特殊字符處理

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 ;

}

/**

* 過(guò)濾重復(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();

}

/**

* 在原來(lái)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>

//自定義規(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>

<option value="10">長(zhǎng)春</option>

<option value="19">長(zhǎng)沙</option>

</select>

</body>

</html>

注意：該版本有一些bug和對(duì)其他（除ie）瀏覽器不兼容性。

以上所述是小編給大家介紹的在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)知識(shí)，希望對(duì)大家有所幫助

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：基于BootStrap的圖片輪播效果展示實(shí)例代碼

下一篇：JavaScript數(shù)組合并的多種方法

易賢網(wǎng)手機(jī)網(wǎng)站地址：在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長(zhǎng)的行的實(shí)現(xiàn)方法10月30日

vue.js語(yǔ)法及常用指令10月30日

python 讀寫(xiě)中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問(wèn)題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開(kāi)啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開(kāi)發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類(lèi)型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合