최근에 IE8에서 JS 문제가 발생했습니다. Pinyin 또는 첫 번째 문자를 사용하려면 (IE8)을 구현하여 SELECT에서 내용을 검색해야합니다. 원래 Combobox는 중국어 입력 및 검색 만 지원할 수 있었으며 이제는 개선해야합니다. 이제 단계별 구현 방법을 기록합니다. 기능은 간단하며 학습 참조를위한 버그와 단점이있을 수 있습니다. (이 기사는 아이디어 학습 및 백업 만 제공합니다. 실제 상황에서는 IE8 또는 IE 호환성 모드에서 사용해야하므로 다른 브라우저는 고려되지 않습니다).
디렉토리 구조 :
시험
| -js
|-index.html
인덱스 페이지에 추가하십시오
index.html
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> </title> <script type = "text/javaScript"src = "js/autocomplete.js"> </script> <script> <text/javaScript "> id = "txtDisplay"/> <select id = "city"> <city "> <옵션 값 ="1 "> Beijing </옵션> <옵션 값 ="2 "> Shanghai </옵션> <옵션 value ="3 "> Guangzhou </옵션> <옵션 값 ="4 "> shenzhen </옵션> <옵션 value ="5 "> 옵션> 옵션> <옵션 값 = "7"> shenyang </옵션> <옵션 값 = "8"> nanjing </옵션> <옵션 값 = "9"> wuhan </옵션> <옵션 value = "10"> changchun </옵션> <옵션 값 = "11"> chengdu </옵션> <옵션 value = "12"> Dalian </옵션> < value = "14"> Qingdao </옵션> <옵션 값 = "15"> ajinan </옵션> <옵션 값 = "16"> xiamen </옵션> <옵션 value = "17"> fuzhou </옵션 value = "18"> xi'an </옵션> <옵션 value = "19"> changsha </sects> </html>
효과 : Select의 드롭 다운 목록 상자를 숨기십시오. 입력 텍스트 상자를 클릭하면 입력 상자 하단에 표시하십시오. 선택이 완료된 후 선택을 숨 깁니다.
JS 구현 :
페이지에 이러한 기능을 구현할 여러 장소가있는 경우 객체 지향적 사고를 사용하고 가능한 한 코드를 재사용해야합니다. AP와 같은 컬렉션을 사용자 정의해야합니다.
autocomplete.js
함수 map () { / ** 키를 저장하기위한 배열 (Traversal에 사용)* / 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 (키); this.data [key] = null; }; / ** * 맵을 가로 지르고 처리 함수 실행 * * @param {function} 콜백 함수 함수 (키, 값, 색인) {..} */ 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 's entryset ())* @return key-key value 객체 {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]}; } 리턴 항목; }; / *** 맵이 비어 있는지 결정*/ 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+= "}"; 반환 s; }; } array.prototype.remove = function (s) {for (var i = 0; i <this.length; i ++) {if (s == this [i]) this.splice (i, 1); }}이제 입력을 전달하고 객체를 선택한 다음 이벤트 바인딩과 같은 일련의 작업을 수행하는 데 사용되는 프로그램로드 엔트리 파일을 작성해야합니다.
var autocompletemap = 새 map (); // 구성 요소 컨테이너는 구성 요소 이벤트 중심으로 호출하기에 편리하고 다중 구성 요소 관리 var splitfleg = "_"를 지원합니다. // 분리기/*** 텍스트 상자, 드롭 다운 상자는 자동 완성 구성 요소* @param {object} txtobj 텍스트 상자 개체* @param {object} selectObj 드롭 다운 상자 객체* @param {int} 드롭 다운 상자의 수를 표시* @param {int} 드롭 다운 박스의 autocollect (txtobj, selectocollect). selectlength) {this.cachecontainer = new array (); // 캐시 컨테이너, 페이지가 방금로드 될 때 옵션의 옵션의 내용을 캐시하는 데 사용됩니다. this.init = function () {this.initcache (); // 캐시 데이터, 옵션 데이터를 캐시 컨테이너로 캐시 this.initcss (); // CSS 초기화 및 숨기기 this.registerEvent (); // 등록 이벤트 this.setSelectIdPosition (); // select // 캐시 현재 구성 요소의 위치를 설정하여 구성 요소 이벤트가 구동 될 때 호출을 용이하게합니다. 동시에, 다중 성분 관리 autocompletemap.put (txtobj.id + selectObj.id, this)을 지원합니다. // 인터페이스가 새로 고쳐진 후 직접 대행사 드롭 다운 상자의 텍스트 값을 텍스트 상자에 var var selectIndex = selectObj.SelectedIndex; if (selectIndex> 0) // 첫 번째 내용은 일반적으로 [선택]입니다. 그렇지 않은 경우 변경> 0 ~> = 0 txtobj.value = selectObj.options [selectIndex] .text; } // 캐시 컨테이너에 대한 캐시 데이터 및 캐시 옵션 데이터 this.initCache = function () {var select_options = selectObj.options; if (select_options == null || select_options.length == 0) {return; } this.CacheCeNtainer = []; 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 = "절대"; selectObj.style.zindex = 2; selectObj.style.width = selectlength + "px"; selectObj.multiple = "배수"; txtobj.style.width = selectlength -5 + "px"; } this. 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 = 위치 [0] + "px"; selectObj.style.top = 위치 [3] + 3 + "px"; } this.FindPosition = function (OELEMENT) {var X2 = 0; var y2 = 0; var width = orelement.offsetWidth; var height = orelement.offsetheight; if (typeof (oelement.offsetparent)! = 'undefined') {for (var posx = 0, posy = 0; oelement; oelement = olement.offsetparent) {posx += orelement.offsetleft; posy += orelement.offsettop; } x2 = posx + 너비; y2 = posy + 높이; 반환 [posx, posy, x2, y2]; } else {x2 = oelement.x + 너비; y2 = orelement.y + 높이; return [oelement.x, oelement.y, x2, y2]; }} //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = 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) {// 현재 입력 상자 또는 선택 목록이 초점이 맞지 않는 경우, selectObj.style.display = "none"; // 선택 목록을 숨기십시오}}/*** 초점 이벤트*/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) {// 현재 객체에 초점을 맞 춥니 다. } var selectIdlength = selectObj.options.length; if (selectIdlength> selectSize) {selectObj.size = selectsize; } else {selectObj.size = selectIdlength; } selectObj.style.display = "block"; }} var myTimeout = null; / ** * 텍스트 상자 마우스는 릴리스 이벤트에 중점을 둡니다. 타이머를 설정하고 각 특정 시간에 함수를 실행하고 입력 상자에 일치하는 선택 목록 선택 및 디스플레이 */ this.txtObjKeyUpevent = function () {var autocomplete = autocompletemap.get (txtobj.id + selectObj.id); if (event.keyCode == 40) {// 입력 상자에서 키보드 화살표 키를 클릭하면이 시간에 검색 할 필요가 없습니다. 입력 var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == txtObj.id) {selectObj.focus (); if (selectObj.options.length> = 1) selectObj.option [0] .Selected = true; } 반품; } if (autocomplete.mytimeout! = null) {// 세트 타임 실행 이벤트를 지우십시오. } autocomplete.mytimeout = settimeout (autocomplete.doajax, 200); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Do the main query matching operation*/ this.doAJAX = function() {var autocomplete = autocompletemap.get (txtobj.id + selectObj.id); // 원래 옵션을 지우십시오. autocomplete.setSelectIdPosition (); var inputstr = txtobj.value; var arrays = autocomplete.compareinput (inputstr); // 쿼리 조건을 충족하는 데이터를 일치시킨다. 반품; } selectObj.style.display = "block"; for (var i = 0; i <arrays.length; i ++) {var OptionParams = 배열 [i] .split (splitfleg); var opt = 새 옵션 (); opt.text = OptionParams [0]; opt.value = 옵션 파람 [1]; selectObj.add (opt); } if (arrays.length> selectSize) {selectObj.size = selectsize; } else {selectObj.size = arrays.length; }} / ** * 원래 옵션을 지우십시오 * / this.clearAllOptions = function () {// 원래 옵션을 지우십시오. 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, ""); // 전면에서 빈 문자열을 제거합니다. inputstr = this.deleteSpecialSpace (inputstr); // (inputstr == null || inputstr.length == 0) if 특수 빈 문자열을 제거하십시오. } inputstr = disableScialcharacter (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]). 대체 (/(/(^[/s]*)/g, ""); selectText = this.deletEpeCialSpace (selectText); if (comparerUles (inputstr, selectText)) {// 규칙 일치 RULCESTARRAY [k] = this.CacheContainer [i]; K ++; }} return iriquearray (resultArray); } / *** 특수 빈 문자열 제거* / this.deleteSpecialSpace = function (srcstr) {var temp = ""; for (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // 인터페이스의 특수 공간 유니 코드 = 160,이 공간은 (charstr.charcodeat (0) == 160) {계속; } temp += charstr; } 반환 온도; }}/*** 필터링 해야하는 @param {string} inputStrs 문자* 특수 문자 처리*/함수 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 ( "// (", 'g')), "// ("); inputstr = inputstr.replace (new regexp ( "// |", 'g'), "//"); inputstr = inputStr.replace ( "//], 'g') regexp ( "//]", 'g'), "//]"); inputstr = inputstr.replace (new regexp ( "//*", 'g'), "//*"); inputstr = inputstr.replace (new regexp ( "//+", 'g'), "//+"); inputstr = inputstr.replace (new regexp ( "//?", 'g'), "//?"); 리턴 inputstr; } /*** 일치하는 규칙* @param {string} inputstr input box 문자, 조건 일치* @param {string} selectText는 텍스트* /함수 비교 (inputstr, selectText)와 일치합니다. {// 중국어가 returntext.indexof (inputstr)! = -1; } / *** 필터 복제 데이터* @param {object} arr result array* / function iriquearray (arr) {if (arr == null || arr.length == 0) {return arr; } return Ar } / *** 원래 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 (); }}}}중국어를 Pinyin으로 변환하기위한 도구 J를 소개합니다
pinyinhanzi.js
/ ** * Pinyin 도구로의 사람 변환 js */ var key2code = {65 : "a", 66 : "b", 67 : "c", 68 : "d", 69 : "e", 70 : "f", 71 : "g", 72 : "h", 73 : "i", "j", 75 : "k", "l", 77 : "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 : "49 :"2 ", 51 :", 3 ", 52 :", 51 : "2" "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 : "ba", 0xb0ee : "ba" "bao", 0xb1ad : "bei", 0xb1bc : "ben", 0xb1c0 : "beng", 0xb1c6 : "bi", 0xb1de : "bian", 0xb1ea : "biao", 0xb1ee : "bie", 0xb1f2 : "bin", 0xb1f8 : "bing" "bo", 0xb2b8 : "bu", 0xb2c1 : "ca", 0xb2c2 : "cai", 0xb2cd : "can", 0xb2d4 : "cang", 0xb2d9 : "cao", 0xb2de : "ce", 0xb2e3 : "ceng", 0xb2e5 : "cha", 0xb2e " "chai", 0xb2f3 : "chan", 0xb2fd : "chang", 0xb3ac : "chao", 0xb3b5 : "che", 0xb3bb : "chen", 0xb3c5 : "cheng", 0xb3d4 : "chi", 0xb3e4 : "Chong", 0xb3e9 " "chu", 0xb4a7 : "chuai", 0xb4a8 : "chuan", 0xb4af : "chuang", 0xb4b5 : "chui", 0xb4ba : "chun", 0xb4c1 : "chuo", 0xb4c3 : "ci", 0xb4cf : "cong", "cong", "cong", "cong" 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 ", 0xb6aa :"diu " "dou", 0xb6bc : "du", 0xb6cb : "duan", 0xb6d1 : "dui", 0xb6d5 : "dun", 0xb6de : "duo", 0xb6ea : "e", 0xb6f7 : "en", 0xb6f8 : "er", 0xb7a2 : "fa", 0xb6f8 : "er", 0xb7a2 : "E" 0xB7BB : "FANG", 0XB7C6 : "FEI", 0xB7D2 : "FEN", 0xB7E1 : "FENG", 0xB7F0 : "FO", 0xB7F1 : "FOU", 0xB7F2 : "FU", 0XB8C1 : "GA", 0XB8C3 : "gai", "gai", "gai", "gai" 0xb8d4 : "gang", 0xb8dd : "gao", 0xb8e7 : "ge", 0xb8f8 : "gei", 0xb8f9 : "gen", 0xb8fb : "gen", 0xb9a4 : "gong", 0xb9b3 : "gou", 0xb9bc : "gu", "gu", "gu" 0xB9D4 : "guai", 0xb9d7 : "guan", 0xb9e2 : "guang", 0xb9e5 : "gui", 0xb9f5 : "Gun", 0xb9f8 : "guo", 0xb9fe : "ha", 0xbaa1 : "han", "han", "han", "han" 0xbabe : "hao", 0xbac7 : "He", 0xbad9 : "hei", 0xbadb : "hen", 0xbadf : "heng", 0xbae4 : "hong", 0xbaed : "hou", 0xbaf4 : "hu", 0xbba8 : "hua", 0xbb1 : "hua", 0xbb1 : "hua" "hua", 0xbbc4 : "huang", 0xbbd2 : "hui", 0xbbe7 : "hun", 0xbbed : "huo", 0xbbf7 : "ji", 0xbcce : "jia", 0xbcdf : "jian", 0xbda9 : "jiang", "jiang", "jiang", "jia" 0xBDD2 : "jie", 0xbded : "Jin", 0xbea3 : "Jing", 0xbebc : 0xbebc : "jiong", 0xbebe : "jiu", 0xbecf : "ju", 0xbee8 : "juan", 0xbeef : "jue", 0xbef9 : "jun", 0xbfa : ", 0xbfa :"jun " "kai", 0xbfaf : "kan", 0xbfb5 : "kang", 0xbfbc : "kao", 0xbfc0 : "ke", 0xbfcf : "ken", 0xbfcf : "ken", 0xbfd3 : "kong", 0xbfd5 : "kong", "koug" 0xbfdd : "ku", 0xbfe4 : "kua", 0xbfe9 : "kuai", 0xbfed : "kuan", 0xbfef : "kuang", 0xbff7 : "kui", 0xc0a4 : "kun", 0xc0a8 : "kuo", 0xc0ac : "kui" "lai", 0xc0b6 : "lan", 0xc0c5 : "lang", 0xc0cc : "lao", 0xc0d5 : "le", 0xc0d7 : "lei", 0xc0e2 : "leng", 0xc0e5 : "li", 0xc1a9 : "lia", 0xc1c1 x ", 0xc1c1 x", 0xc1a9 : "lia. "liang", 0xc1c3 : "liao", 0xc1d0 : "lie", 0xc1d5 : "lin", 0xc1e1 : "ling", 0xc1ef : "liu", 0xc1fa : "long", 0xc2a5 : "lou", 0xc2ab : "lu" "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" "nei", 0xc4db : "nen", 0xc4dc : "neng", 0xc4dd : "ni", 0xc4e8 : "nian", 0xc4ef : "niang", 0xc4f1 : "niao", 0xc4f3 : "nie", 0xc4fa : "nin", 0xc4f : "neh", 0xc5a3 : "niu", 0xc5a7 : "nong", 0xc5ab : "nu", 0xc5ae : "nv", 0xc5af : "nuan", 0xc5b0 : "nue", 0xc5b2 : "nuo", 0xc5b6 : "o", 0xc5b7 : ", 0xc5b6 :", 0xc5b7 : ", 0xc5b7 :", 0xc5b7 : " 0xc5c4 : "pai", 0xc5ca : "pan", 0xc5d2 : "pang", 0xc5d7 : "pao", 0xc5de : "pei", 0xc5e7 : "pen", 0xc5e9 : "peng", 0xc5f7 : "piac6aa : 0xc6aa :"pian ","pian " 0xc6b2 : "Pie", 0xc6b4 : "pin", 0xc6b9 : "ping", 0xc6c2 : "po", 0xc6cb : "pu", 0xc6da : "qi", 0xc6fe : "qia", 0xc7a3 : "qian", 0xc7b9 : "Qoang", "Qiang", "Qiang", 0xc7b9 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 : ", 0xc8e0 :"rou " "ruan", 0xc8ef : "rui", 0xc8f2 : "run", 0xc8f4 : "ruo", 0xc8f6 : "sa", 0xc8f9 : "sai", 0xc8fd : "san", 0xc9a3 : "sang", 0xc9a6 : "sao" 0xc9ae : "seng", 0xc9af : "sha", 0xc9b8 : "shai", 0xc9ba : "shan", 0xc9ca : "shang", 0xc9d2 : "shao", 0xc9dd : "she", 0xc9e9 : "shen", 0xc9f9 : "Sheng", "Sheng", "Sheng", "shen", 0xc9dd. 0xcad5 : "shou", 0xcadf : "shu", 0xcba2 : "shua", 0xcba4 : "shuai", 0xcba8 : "shuan", 0xcbaa : "shuang", 0xcbad : "shui", 0xcb1 : "shun", 0xcbb5 : "Shuo", ","Shuo ","Shuo ","Shuo ", 0xcbb5 0xcbd1 : "sou", 0xcbd4 : "su", 0xcbe1 : "suan", 0xcbe4 : "sui", 0xcbef : "sun", 0xcbf2 : "suo", 0xcbfa : "ta", 0xcca5 : "tai", 0xcca : "tan", 0xc0 " "tao", 0xccd8 : "te", 0xccd9 : "teng", 0xccdd : "ti", 0xccec : "tian", 0xccf4 : "tiao", 0xccf9 : "tie", 0xccfc : "ting", 0xcda8 : "tong", 0xcd " "tu", 0xcdc4 : 0xcdc6 : "tui", 0xcdcc : "tun", 0xcdcf : "tuo", 0xcdda : "wa", 0xcde1 : "wai", 0xcde3 : "wan", 0xcdf4 : "wang", 0xcdfe : "wei", "wan", "wan", "wan", 0xcde3 0xcecb : "weng", 0xcece : "wo", 0xced7 : "wu", 0xcef4 : "xi", 0xcfb9 : "xia", 0xcfc6 : "xian", 0xcfe0 : "xiang", 0xcff4 : "xiang", 0xcf4 : "xiaro", 0xd0a8 : "xiang", 0xD0BD : "Xin", 0xd0c7 : "Xing", 0xd0d6 : "Xiong", 0xd0dd : "xiu", 0xd0e6 : "xu", 0xd0f9 : "xuan", 0xd1a5 : "xue", 0xd1ab : "xun", 0xd1b9 : "xun" "yan", 0xd1ea : "Yang", 0xd1fb : "yao", 0xd2ac : "yi", 0xd2bb : "yi", 0xd2f0 : "yin", 0xd3a2 : "ying", 0xd3b4 : "yo", 0xd3b5 : "yong" "yu", 0xd4a7 : "yuan", 0xd4bb : "yue", 0xd4c5 : "yun", 0xd4d1 : "za", 0xd4d4 : "zai", 0xd4db : "zan", 0xd4df : "zano", 0xd4e2 : "zao", "zao", "zao" 0xd4f4 : "zei", 0xd4f5 : "zen", 0xd4f6 : "zeng", 0xd4fa : "zha", 0xd5aa : "zhai", 0xd5b0 : "zhan", 0xd5c1 : "zhang", 0xd5d0 : "zhao", 0xd5da : "zhao" 0xd5e4 : "Zhen", 0xd5f4 : "Zheng", 0xd6a5 : "zhi", 0xd6d0 : "Zhong", 0xd6db : "zhou", 0xd6e9 : "zhu", 0xd7a5 : "zhua", 0xd7a7 : "zhua", 0xd7a7 : "zhua" "zhuan", 0xd7ae : "zhuan", 0xd7b5 : "zhui", 0xd7bb : "zhun", 0xd7bd : "zhuo", 0xd7c8 : "zi", 0xd7d7 : "zong", 0xd7de : "zou", 0xd7e2 : "zu", 0xd7de " "Zuan", 0xd7ec : "Zui", 0xd7f0 : "Zun", 0xd7f2 : "Zuo"}; var spellarray = new array (); var pn = ""; 함수 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)) rack char; for (var i = asccode; (! spell [i] && i> 0);) i-; 반환 주문 [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 (i) +pinyin () "</rt> </ruby>"// else pstr + = pinyin (str.charat (i)) + "} 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)) + ""} pstr 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)) + ""} pstr 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 : 1 : 0)} retear} rvalue}}} breat. Code <! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javaScript"src = "js/autocemplete.js"> <텍스트/Javascript ""텍스트/javascript "에서 내 코드 조각에 파생 된 일반 사본보기 코드 조각 src = "js/pinyinhanzi.js"> </script> <script type = "text/javaScript"> // 사용자 정의 규칙 함수 comparerules (inputstr, selectText) {// 중국어 및 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 (); }. value = "6"> tianjin </옵션> <옵션 값 = "7"> shenyang </옵션> <옵션 value = "8"> nanjing </옵션> <옵션 값 = "9"> 옵션> <옵션 값 = "10"> changchun <옵션 value = "11"> chengdu </옵션> <옵션 = "12"> dalian </옵션> value = "13"> hangzhou </옵션> <옵션 값 = "14"> Qingdao </옵션> <옵션 value = "15"> jinan </옵션> <옵션 value = "16"> xiamen </옵션> <옵션 값 = "17"> fuzhou </옵션> <옵션 value = "18"> xi'an <옵션> <옵션> <옵션> <옵션> <옵션 </옵션> < value = "20"> Harbin </옵션> </select> </body> </html>참고 : 이 버전에는 몇 가지 버그와 다른 (III 제외)와 비 호환성이 있습니다.
위의 것은 IE8에서 Combobox 지원 Pinyin 검색 기능을 구현하는 JS에 대해 귀하에게 소개 된 관련 지식입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!