最近、プロジェクトには小さな機能が含まれます。サプライヤーの数（約3,000）が多いため、ドロップダウンボックスを直接生成することは明らかに非現実的です/Pinyin、データベースのぼかしの問い合わせを自動的に入力し、対応する結果を返して、入力ボックスの入力コンテンツが変更されると、Datalistはドロップダウンボックスを自動的にトリガーします。より便利です。フロントエンドコードは次のとおりです。
HTMLコード：
<！doctype html> <html lang = en> <head id = head> <title> inventoryドロップダウンテスト</title> <meta charset = utf-8> <meta content = ie = edge = 1 http- equiv = x-ua-compatible> <meta name = viewport content = width = device-width、initial-scale = 1.0> <meta name = content => <meta name =著者コンテンツ=> <script src = ../ . ./Common/Content/jquery-1.7.2.min.jstype=text/javascript> </script> <script src = ../../common/pages/include.js class = Include = text/ja. vascript> </script> <script src = .././common/js/js/ajaxjson.js type = text/javascript> </scrip> <script src = ../common/js/setting.jsタイプ= = Text/javascript> </scrip> <script src = ../common/js/paging.js Type = text/javascript> </script> <scrip = ../../warehousemanage/testyy .jsタイプ=テキスト=テキスト/javaScript> </script> </head> <body class => <！ - < class = content> <div class = header> <h1 id = adu class = page-title>ドロップダウンボックステスト</h1> </div> <div class = container-fluid> <div classs = row-fluid> <！ - -------------------------------------------------------------------------------------------- ---------------------------------------> <Divクラス=ウェルID = SearchDemo> <p>テストデータ（デフォルトはD00001）：<br> Kunshan Mainland Accessories Co.、Ltd。Ksdlpjyxgs <br> Yizhen Enterprise Co.、Ltd。 p> </div>サプライヤー名に応じた動的マッチング（中国語またはPinyinを使用できます）：<入力リスト= bro id = name oninput = this.value.value.replace（/^ +| +$/g 、 ''）; 'name'、 'bro'、 'name'）> <datalist id =/datalist> </div> </body> <！ ----------------------------------------------------------フッター---------------------------> <フッタークラス= foot> </footer> </html>
JavaScriptコード：
var listobj = null i nputタグID * datAlistID：id * itemname of datalistタグ：jsonデータに必要なバックグラウンドで返されるキー値（フォームの中国フィールドの属性名のみ） ）{input）content = document.getElementByID（inputId）; ChildNodes; inputContent.value = null;} // data = type =searchwords¶m= +inputContent.value; /注：url ----------------------------------------------------------------------------------------------- -------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- getResult）;} else if（/^[/u4e00- // u4e00-/u9fa5]*$/。test（inputContent.Value））{// ; //データ---------- baseurl + /servlet /listdemo：url -------- sendrequest投稿、data、getResult）; （jdata.length <= 10）{maxlength = jdata.length;} var sub = listobj.childnodes; （sub [i]）空のDatalistすべてのドロップオプション} if（jdata.length == 0）入力ボックスの値をクリアします。 ^[a-za-z]*$/。 alue）{obj.value = indexobj [requestItem];} listobj.appendChild（obj）;} document.createelement（option）; ;}上記は、新しいHTML5の新しいラベルデータと、バックグラウンドデータベースデータを実装することですやがて。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！