Recently I encountered a js problem in ie8. I need to implement (ie8) to use pinyin or first letters to retrieve the content in select. The original combobox could only support Chinese character input and search, and now I need to improve it. Now I will record the step-by-step implementation method. The function is simple, and there may be bugs and shortcomings for learning reference. (This article only provides idea learning and backup. In actual situation, it needs to be used in ie8 or ie compatibility mode, so other browsers are not taken into account)
Directory structure:
test
|--js
|--index.html
Add in the index page
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">Beijing</option> <option value="2">Shanghai</option> <option value="3">Guangzhou</option> <option value="4">Shenzhen</option> <option value="5">Chongqing</option> <option value="6">Tianjin</option> <option value="7">Shenyang</option> <option value="8">Nanjing</option> <option value="9">Wuhan</option> <option value="10">Changchun</option> <option value="11">Chengdu</option> <option value="12">Dalian</option> <option value="13">Hangzhou</option> <option value="14">Qingdao</option> <option value="15">aJinan</option> <option value="16">Xiamen</option> <option value="17">Fuzhou</option>> <option value="18">Xi'an</option> <option value="19">Changsha</option> <option value="20">Harbin</option> </select> </body> </html>
Effect: Start hiding the drop-down list box of select. When clicking the input text box, display it to the bottom of the input box. After the selection is completed, hide the select.
js implementation:
If a page has multiple places to implement such functions, you need to use object-oriented thinking and reuse the code as much as possible. We need to customize a collection like ap.
autoComplete.js
function Map() { /** Array for storing the keys (used for traversal) */ this.keys = new Array(); /** Store data*/ this.data = new Object(); /** * Put a key-value pair* @param {String} key * @param {Object} value */ this.put = function(key, value) { if(this.data[key] == null){ this.keys.push(key); } this.data[key] = value; }; /** * Get the value corresponding to a key* @param {String} key * @return {Object} value */ this.get = function(key) { return this.data[key]; }; /** * Delete a key-value pair* @param {String} key */ this.remove = function(key) { this.keys.remove(key); this.data[key] = null; }; /** * Traversing the Map and executing the processing function* * @param {Function} Callback 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); } }; /** * Get a key-value array (similar to Java's entrySet()) * @return Array of key-value object {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; }; /** * Determine whether the Map is empty*/ this.isEmpty = function() { return this.keys.length == 0; }; /** * Get the number of key-value pairs*/ this.size = function(){ return this.keys.length; }; /** * Rewrite 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); } }Now we need to write a program loading entry file, which is used to pass input and select objects in, and then perform a series of operations such as event binding.
var autoCompleteMap = new Map(); //Component container, which is convenient for calling when component event driven, and supports multi-component management var splitFleg = "_"; //Separator/** * Text box, drop-down box is combined into an automatic completion component* @param {Object} txtObj Text box object* @param {Object} selectObj drop-down box object* @param {int} selectSize Display the number of drop-down boxes* @param {int} selectLength Length of drop-down box*/ function AutoComplete(txtObj, selectObj, selectSize, selectLength) { this.cacheContainer = new Array(); //Cache container, used to cache the contents in the option to cacheContainer when the page is just loaded. This.init = function() { this.initCache(); //Cache data, cache the option data to cacheContainer this.initCSS(); //Initialize css and hide select this.registerEvent(); //Register event this.setSelectIdPosition(); //Set the location of select//Cache current component to facilitate call when component event driven. At the same time, it supports multi-component management autoCompleteMap.put(txtObj.id + selectObj.id, this); // After the interface is refreshed, write the text value of the direct agency drop-down box to the text box var selectIndex = selectObj.selectedIndex; if (selectIndex > 0) //The first content is generally [Please select]. If not, change >0 to >=0 txtObj.value = selectObj.options[selectIndex].text; } //Cache data and cache option data to 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() { // drop-down box event selectObj.ondblclick = this.doubleClickEvent; selectObj.onkeyup = this.keyupEvent; selectObj.onblur = this.OnblurEvent; selectObj.onfocus = this.OnfocusEvent; // text box event 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]; } } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 13) { event.returnValue = false; var srcElem = document.activeElement; //Get the currently focused object var testval = srcElem.id; if (testval == selectObj.id) { autocomplete.doubleClickEvent(); } } } /** * Focus event*/ this.OnblurEvent = function() { var srcElem = document.activeElement; var testval = srcElem.id; if (testval != selectObj.id && testval != txtObj.id) { //If the current input box or select list is not focused, selectObj.style.display = "none"; //Hide the select list} } /** * Focus event*/ 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) { //Focus on the current object if (txtObj.value.length != 0) { //When there are characters in the input box, no operation is performed; } var selectIdLength = selectObj.options.length; if (selectIdLength > selectSize) { selectObj.size = selectSize; } else { selectObj.size = selectIdLength; } selectObj.style.display = "block"; } } var myTimeout = null; /** * The text box mouse focuses on the release event, set a timer, execute the function at each specific time, query the select list data matched in the input box and display */ this.txtObjKeyupEvent = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); if (event.keyCode == 40) { //Click the keyboard arrow key in the input box, and there is no need to search at this time. The search event is triggered when 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) { //Clear the set timed execution event clearTimeout(autocomplete.myTimeout); } autocomplete.myTimeout = setTimeout(autocomplete.doAJAX, 200); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Do the main query matching operation*/ this.doAJAX = function() { var autocomplete = autoCompleteMap.get(txtObj.id + selectObj.id); //Clear the original OPTIONS autocomplete.clearAllOptions(); autocomplete.setSelectIdPosition(); var inputStr = txtObj.value; var arrays = autocomplete.compareInput(inputStr); //Match data that meets the query conditions 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; } } /** * Clear the original OPTIONS */ this.clearAllOptions = function() { // Clear the original OPTIONS var nL = selectObj.options.length; while (nL > 0) { selectObj.remove(selectObj.options.length - 1); nL = selectObj.options.length; } } //-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Conditions that need to be matched in the input box*/ this.compareInput = function(inputStr) { if (this.cacheContainer.length == 0) { return; } inputStr = inputStr.replace(/(^[/s]*)/g, ""); //Remove the blank string in the front inputStr = this.deleteSpecialSpace(inputStr); //Remove the special blank string if (inputStr == null || inputStr.length == 0) { return this.cacheContainer; } inputStr = disableSpecialCharacter(inputStr); //Special character processing 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)) { //Match rule resultArray[k] = this.cacheContainer[i]; k++; } } return uniqueArray(resultArray); } /** * Remove special blank string*/ this.deleteSpecialSpace = function(srcStr) { var temp = ""; for (var i = 0; i < srcStr.length; i++) { var charStr = srcStr.charAt(i); // Special space on the interface Unicode=160, this space is neither full-width nor half-width if (charStr.charCodeAt(0) == 160) { continue; } temp += charStr; } return temp; } } /** * @param {String} inputStr Characters that need to be filtered* Special character processing*/ 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'), "//+"); inputStr = inputStr.replace(new RegExp("//?", 'g'), "//?"); return inputStr; } /** * Matching rules* @param {String} inputStr input box character, match the condition * @param {String} selectText is matched with text*/ function compareRules(inputStr, selectText) { //Match the Chinese characters return selectText.indexOf(inputStr) != -1 ; } /** * Filter duplicate data* @param {Object} arr Result array*/ function uniqueArray(arr) { if(arr == null || arr.length == 0){ return arr; } return arr.reverse().join(",").match( /([^,]+)(?!.*/1)/ig).reverse(); } /** * Add custom function to execute on the original onload* @param {Object} func loading function*/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } }Introducing tool js to convert Chinese characters into pinyin
pinYinHanZi.js
/** * Man conversion to pinyin tool 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: "gen", 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", 0xBB1: "hua", 0xBBB6: "hua", 0xBBC4: "huang", 0xBBD2: "hui", 0xBBE7: "hun", 0xBBED: "huo", 0xBBF7: "ji", 0xBCCE: "jia", 0xBCDF: "jian", 0xBDA9: "jiang", 0xBDB6: "jia", 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", 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: "meng", 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", 0xCBC9: "song", 0xCBD1: "sou", 0xCBD4: "su", 0xCBE1: "suan", 0xCBE4: "sui", 0xCBEF: "sun", 0xCBF2: "suo", 0xCBFA: "ta", 0xCCA5: "tai", 0xCCAE: "tan", 0xCC0: "tang", 0xCCD: "tao", 0xCCD8: "te", 0xCCD9: "teng", 0xCCDD: "ti", 0xCCEC: "tian", 0xCCF4: "tiao", 0xCCF9: "tie", 0xCCFC: "ting", 0xCDA8: "tong", 0xCDB5: "tou", 0xCDB9: "tu", 0xCDC4: 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: "xiang", 0xCF4: "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: "zhua", 0xD7A8: "zhuan", 0xD7AE: "zhuan", 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 View code fragments derived to my code fragments on 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"> //Custom rules function compareRules(inputStr, selectText) { //Match Chinese characters and pinyin 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">Beijing</option> <option value="2"> Shanghai</option> <option value="3">Guangzhou</option> <option value="5">Chongqing</option> <option value="6">Tianjin</option> <option value="7">Shenyang</option> <option value="8">Nanjing</option> <option value="9">Wuhan</option> <option value="10">Changchun</option> <option value="11">Chengdu</option> <option value="12">Dalian</option> <option value="13">Hangzhou</option> <option value="14">Qingdao</option> <option value="15">Jinan</option> <option value="16">Xiamen</option> <option value="17">Fuzhou</option> <option value="18">Xi'an</option> <option value="19">Changsha</option> <option value="20">Harbin</option> </select> </body> </html>Note: This version has some bugs and incompatibility with other (except III) browsers.
The above is the relevant knowledge introduced to you about JS implementing combobox support pinyin retrieval function on IE8. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!