最近、IE8でJS問題に遭遇しました。 Pinyinまたは最初の文字を使用して、選択のコンテンツを取得するために（IE8）を実装する必要があります。元のコンボボックスは、漢字の入力と検索のみをサポートできますが、今では改善する必要があります。次に、ステップバイステップの実装方法を記録します。関数は単純であり、参照を学習するためのバグと欠点があるかもしれません。 （この記事はアイデアの学習とバックアップのみを提供します。実際の状況では、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 type = "text/javascript"> </script> <input> <body> <input> < id = "city"> <option value = "1"> beijing </option> <option value = "2"> shanghai </option> <option value = "3"> guangzhou </option> <option value = "4"> option> <option値> <オプション値= "5"> chongqing </option> <options値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値= "12" Value = "14"> Qingdao </option> <option value = "15"> ajinan </option> <option value = "16"> xiamen </option> <option value = "17"> fuzhou </option >> <option値> </html>
効果：選択のドロップダウンリストボックスを隠し始めます。 [入力]テキストボックスをクリックするときは、入力ボックスの下部に表示します。選択が完了したら、選択を非表示にします。
JS実装：
ページにそのような機能を実装する複数の場所がある場合、オブジェクト指向の思考を使用して、可能な限りコードを再利用する必要があります。 APのようなコレクションをカスタマイズする必要があります。
autocomplete.js
function map（）{ / **キーを保存するための配列（トラバーサルに使用）* / this.keys = new Array（）; / **データを保存*/ this.data = new object（）; / ** * key-valueペアを入れます * @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]; }; / *** key-valueペアを削除* @param {string} key*/ this.remove = function（key）{this.keys.remove（key）; this.data [key] = null; }; / ** *マップを通過して処理機能を実行する * * @param {function} callback 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キー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]}; } return interrs; }; / ***マップが空であるかどうかを判断します*/ thisempty = 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 = new Map（）; //コンポーネントコンテナ。これは、コンポーネントイベント駆動型の場合に呼び出され、マルチコンポーネント管理var splitfleg = "_"をサポートします。 //セパレーター/***テキストボックス、ドロップダウンボックスは自動完了コンポーネントに結合されます* @param {object} txtobjテキストボックスオブジェクト* @param {object} selectobjドロップダウンボックスオブジェクト* @param {int}ドロップダウンボックスの数を表示* selectlength）{this.cachecontainer = new Array（）; //ページがロードされたときにCacheContainerのオプションで内容をキャッシュするために使用されるコンテナをキャッシュします。 this.init = function（）{this.initcache（）; //データをキャッシュし、オプションデータをCacheContainer this.initcss（）にキャッシュします。 // cssを初期化して非表示this.registerevent（）; // event this.setselectidposition（）; // selectの位置を設定します//コンポーネントイベント駆動のときに通話を容易にするために電流コンポーネントをキャッシュします。同時に、マルチコンポーネント管理AutoCompleTemap.put（txtobj.id + selectobj.id、this）をサポートします。 //インターフェイスが更新されたら、直接代理店のドロップダウンボックスのテキスト値をテキストボックスに書き込みましたvar selectindex = selectobj.SelectedIndex; if（selectindex> 0）//最初のコンテンツは通常[選択してください]。そうでない場合、> 0に> = 0 txtobj.value = selectobj.options [selectindex] .text; } //データとキャッシュオプションデータを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 = "倍数"; 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.offseethight; 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; //現在焦点を絞ったオブジェクト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）{//現在の入力ボックスまたはselectリストが焦点を合わせていない場合、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.options [0] .selected = true; } 戻る; } if（autocomplete.mytimeout！= null）{//設定されたタイミング実行イベントClearTimeout（autocomplete.mytimeout）; } autocomplete.mytimeout = setimeout（autocomplete.doajax、200）; } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * Do the main query matching operation*/ this.doAJAX = function（）{var autocomplete = autocompletemap.get（txtobj.id + selectobj.id）; //元のオプションをクリアautocomplete.clearAlloptions（）; autocomplete.setSelectIdposition（）; var inputstr = txtobj.value; var arrays = autocomplete.compareinput（inputstr）; //クエリ条件を満たすデータを一致させるif（arrays == null || arrays.length == 0）{selectobj.style.display = "none";戻る; } 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; }} / ** *元のオプションをクリア * / 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、 ""）; // front 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]）。 selectText = this.deletespecialspace（selectText）; if（comparerules（inputstr、selecttext））{//ルールresultArray [k] = this.cachecontainer [i]; K ++; }} uniquearray（resultArray）を返します。 } / ***特別な空白の文字列を削除* / this.deletespecialspace = function（srcstr）{var temp = ""; for（var i = 0; i <srcstr.length; i ++）{var charstr = srcstr.charat（i）; //インターフェイスUnicode = 160上の特別なスペース、このスペースは完全な幅でも半幅でもありません。 } temp += charstr; } tempを返します。 }}/*** @param {string}フィルタリングする必要がある入力ストア文字*特別文字処理*/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（ "//]" // 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ボックス文字、条件に一致します* @param {string} selecttextはテキストと一致します* /function comparerules（inputstr、selecttext）{//漢字を一致しますselecttext.indexof（inputstr）！= -1; } / ***フィルターの複製データ* @param {object} arr result array* / function uniquearray（arr）{if（arr == null || arr.length == 0）{return arr; } return arr.Reverse（）。join（ "、"）。match（/( [^、]+）（？！.*/ 1）/ig）.Reverse（）; } / ***元の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（）; }}}}ツールJSを導入して、漢字をPinyinに変換します
Pinyinhanzi.js
/ ** * Pinyinツールへの変換JS */ var key2code = {65： "a"、66： "b"、67： "c"、68： "d"、69： "e"、70： ""、71： "g"、72： "h"、73： "i"、74： ""、75： ""、77：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： "2"、 "2"、55： "52：" 5 "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"、 "ban 「bao」、0xb1ad： "bei"、0xb1bc： "ben"、0xb1c0： "beng"、0xb1c6： "bi"、0xb1de： "bian"、0xb1ea： "biao"、0xb1ee： "bie"、0xb1f2： "" bin " "BO"、0xb2b8： "bu"、0xb2c1： "ca"、0xb2c2： "cai"、0xb2cd： "can"、0xb2d4： "cang"、0xb2d9： "cao"、0xb2de： "" ce "、0xb2e5：" cen "chai"、0xb2f3： "chan"、0xb2fd： "chan"、0xb3ac： "chao"、0xb3b5： "che"、0xb3bb： "chen"、0xb3c5： "cheng"、0xb3d4： "chi"、0xb3e4： "chu"、0xb4a7： "chuai"、0xb4a8： "chuan"、0xb4af： "chuang"、0xb4b5： "chui"、0xb4ba： "chun"、0xb4c1： "chuo"、 "chuo"、0xb4c3： "" ci " 0xb4d6： "cu"、0xb4da： "cuan"、0xb4dd： "cui"、0xb4e5： "cun"、0xb4e8： "cuo"、0xb4ee： "da"、0xb4f4： "dai"、0xb5a2： "dan"、0xb5b1： "dao"、0xb5c2： "de"、0xb5c5： "deng"、0xb5cc： "di"、0xb5df： "dian"、0xb5ef： "diao"、0xb5f8： "die"、0xb6a1： "ding"、0xb6aa： "diu"、0xb6ab： "dou"、0xb6bc： "du"、0xb6cb： "duan"、0xb6d1： "dui"、0xb6d5： "dun"、0xb6de： "duo"、0xb6ea： "e"、0xb6f7： "en"、0xb6f8： "" "、" "、" " 0xb7bb： "fang"、0xb7c6： "fei"、0xb7d2： "fen"、0xb7e1： "feng"、0xb7f0： "fo"、0xb7f1： "fou"、0xb7f2： "fu"、0xb8c1： "ga"、0xb8c3： "gan"、0xb8d4： "gang"、0xb8dd： "gao"、0xb8e7： "ge"、0xb8f8： "gei"、0xb8f9： "gen"、0xb8fb： "gen"、0xb9a4： "gong"、0xb9b9： "gua"、0xb9d4： "guai"、0xb9d7： "guan"、0xb9e2： "guang"、0xb9e5： "gui"、0xb9f5： "gun"、0xb9f8： "guo"、0xb9fe： "ha"、0xbaa1： 0xbabe： "hao"、0xbac7： "he"、0xbad9： "hei"、0xbadb： "hen"、0xbadf： "heng"、0xbae4： "hong"、0xbaed： "hou"、0xbaf4： "hu"、0xbba8： "Hua"、0xbbc4： "huang"、0xbbd2： "hui"、0xbbe7： "hun"、0xbbed： "huo"、0xbbf7： "ji"、0xbcce： "jia"、0xbcdf： "jian"、0xbda9： "jiang"、 "jiang"、 "jian 0xbdd2： "jie"、0xbded： "jin"、0xbea3： "jing"、0xbebc： "jiong"、0xbebe： "jiu"、0xbecf： "ju"、0xbee8： "juan"、0xbeef： "jue"、0xbef9： " "kai"、0xbfaf： "kan"、0xbfb5： "kang"、0xbfbc： "kao"、0xbfc0： "ke"、0xbfcf： "ken"、0xbfcf： "ken"、0xbfd3： "keng"、0xbfd5： "kon 0xbfdd： "ku"、0xbfe4： "kua"、0xbfe9： "kuai"、0xbfed： "kuan"、0xbfef： "kuang"、0xbff7： "kui"、0xc0a4： "" kun "、0xc0a8：" kuo "、0xc0aC "lai"、0xc0b6： "lan"、0xc0c5： "lang"、0xc0cc： "lao"、0xc0d5： "le"、0xc0d7： "lei"、0xc0e2： "leng"、leng "、0xc0e5：" li "、0xc1a9： "liang"、0xc1c3： "liao"、0xc1d0： "lie"、0xc1d5： "lin"、0xc1e1： "ling"、0xc1ef： "liu"、0xc1fa： "long"、long "、0xc2a5：" lou "、0xc2ab：" lu "、0xc2bf： "luan"、0xc2d3： "lue"、0xc2d5： "lun"、0xc2dc： "luo"、0xc2e8： "ma"、0xc2f1： "mai"、0xc2f7： "man"、0xc3a2： "meng"、0xc3a8： "mao：" me "、"、 "、"、 "、 0xc3b5： "mei"、0xc3c5： "men"、0xc3c8： "meng"、0xc3d0： "mi"、0xc3de： "mian"、0xc3e7： "miao"、0xc3ef： "mie"、0xc3f1： "min"、0xc3ff7： "miu"、0xc3fe： "mo"、0xc4b1： "mou"、0xc4b4： "mu"、0xc4c3： "na"、0xc4ca： "nai"、0xc4cf： "nan"、0xc4d2： "nang"、0xc4d3： "nao"、0xc4d8： "、" nan "nei"、0xc4db： "nen"、0xc4dc： "neng"、0xc4dd： "ni"、0xc4e8： "nian"、0xc4ef： "niang"、0xc4f1： "niao"、0xc4f3： "nie"、0xc4fa： 0xc5a3： "niu"、0xc5a7： "nong"、0xc5ab： "nu"、0xc5ae： "nv"、0xc5af： "nuan"、0xc5b0： "nue"、0xc5b2： "nuo"、0xc5b6： "o"、0xc5b7： 0xc5c4： "pai"、0xc5ca： "pan"、0xc5d2： "pang"、0xc5d7： "pao"、0xc5de： "pei"、0xc5e7： "pen"、0xc5e9： "peng"、0xc5f7： "pi"、 "pi"、 "pi"、 "pi"、 "pi"、 "pi"、 "pi"、 0xc6b2： "pie"、0xc6b4： "pin"、0xc6b9： "ping"、0xc6c2： "po"、0xc6cb： "pu"、0xc6da： "qi"、0xc6fe： "qia"、0xc7a3： "qian"、 "qiaia 0xc7d0： "qie"、0xc7d5： "qin"、0xc7e0： "qing"、0xc7ed： "qiong"、0xc7ef： "qiu"、0xc7f7： "qu"、0xc8a6： "quan"、0xc8b1： "Quan" 0xc8bf： "rang"、0xc8c4： "rao"、0xc8c7： "re"、0xc8c9： "ren"、0xc8d3： "reng"、0xc8d5： "ri"、0xc8d6： "rong"、0xc8e0： "rou：" "rou：" "、 0xc8ef： "rui"、0xc8f2： "run"、0xc8f4： "ruo"、0xc8f6： "sa"、0xc8f9： "sai"、0xc8fd： "san"、0xc9a3： "sang"、0xc9a6： "" sao： "" 0xc9ae： "seng"、0xc9af： "sha"、0xc9b8： "shai"、0xc9ba： "shan"、0xc9d2： "shao"、0xc9dd： "" he "、0xc9e9：" shen "、0xc9f9：" shen 0xcad5： "shou"、0xcadf： "shu"、0xcba2： "shua"、0xcba4： "shuai"、0xcba8： "shuan"、0xcbaa： "shuang"、0xcbad： "shui"、0xcb1： "shun" 0xcbd1： "sou"、0xcbd4： "su"、0xcbe1： "suan"、0xcbe4： "sui"、0xcbef： "sun"、0xcbf2： "suo"、0xcbfa： "ta"、0xcca5： "tai"、0xccae "Tao"、0xccd8： "te"、0xccd9： "teng"、0xccdd： "ti"、0xccec： "tian"、0xccf4： "tiao"、0xccf9： "tie"、0xccfc： "ting"、0xcda8： "" tun "、0xcdb5："、 "、0xcdb9： 0xcdc4：0xcdc6： "tui"、0xcdcc： "tun"、0xcdcf： "tuo"、0xcdda： "wa"、0xcde1： "wai"、0xcde3： "wan"、 "wan"、0xcdf4： "wang"、0xcdfe： " "weng"、0xcece： "wo"、0xced7： "wu"、0xcef4： "xi"、0xcfb9： "xia"、0xcfc6： "xian"、0xcfe0： "xiang"、0xcff4： "xiang"、0xcf4： "xiao"、 " "xin"、0xd0c7： "xing"、0xd0d6： "xiong"、0xd0dd： "xiu"、0xd0e6： "xu"、0xd0f9： "xuan"、0xd1a5： "xue"、0xd1ab： "xun"、0xd1b9： "、" 0xd1ea： "yang"、0xd1fb： "yao"、0xd2ac： "ye"、0xd2bb： "yi"、0xd2f0： "yin"、0xd3a2： "ying"、0xd3b4： "" yo "、0xd3b5：" yong "、0xd3c4： 0xd4a7： "yuan"、0xd4bb： "yue"、0xd4c5： "yun"、0xd4d1： "za"、0xd4d4： "zai"、0xd4db： "zan"、0xd4df： "zan "zei"、0xd4f5： "zen"、0xd4f6： "zeng"、0xd4fa： "zha"、0xd5aa： "zhai"、0xd5b0： "zhan"、0xd5c1： "zhang"、0xd5d0： "zhao"、0xd5da： "zhen"、0xd5f4： "zheng"、0xd6a5： "zhi"、0xd6d0： "zhong"、0xd6db： "zhou"、0xd6e9： "zhu"、0xd7a5： "" zhua "、0xd7a7 0xd7ae： "zhuan"、0xd7b5： "zhui"、0xd7bb： "zhun"、0xd7bd： "zhuo"、0xd7c8： "zi"、0xd7d7： "zong"、0xd7de： "Zou"、0xd7e2： 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））return 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>" "</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（strtharat（i））; // pstr + = "" + pinyin（str.charat（i））; // else pstr + = pinyin（str.charat（i）） + ""} 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を返します。 } function pinyinsort（a、b）{var rvalue = 0 for（var i = 0; i <a.length; i ++）{var pina = pinyin（a.charat（i））var pinb = pinyin（i））if（rvalue = pina> pinb？コードでコードフラグメントに導出されたコードフラグメントを表示<！doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <スクリプトタイプ= "テキスト/javascript" src = " src = "js/pinyinhanzi.js"> </script> <script = "text/javascript"> //カスタムルール関数compareules（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（）; } </script> </head> <body> <入力タイプ= "text" id "txtdisplay"/> <select id = "city"> <option value = "1"> beijing </option> <option value = "2"> option> <option値> <オプション値= "3"> option> option> <option値値= "6"> tianjin </option> <option value = "7"> shenyang </option> <option値= "8"> nanjing </option> <option値= "9"> wuhan </option> <option value = "10"> changchun </option> <option value = "11"> option </option </option> <option> <option> <"> <値= "13"> hangzhou </option> <option value = "14"> qingdao </option> <option値> <option値= "15"> jinan </option> <option value = "16"> xiamen </option> <option value = "17" value = "20"> harbin </option> </select> </body> </html>注：このバージョンには、いくつかのバグと他の（iiiを除く）ブラウザとの非互換性があります。
上記は、JSがIE8でComboboxサポートPinyin検索機能を実装することについて紹介された関連する知識です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！