เมื่อเร็ว ๆ นี้โครงการเกี่ยวข้องกับคุณสมบัติเล็ก ๆ /Pinyin ป้อนการสอบถามข้อมูลเบลอฐานข้อมูลโดยอัตโนมัติและส่งคืนผลลัพธ์ที่สอดคล้องกันเพื่อสร้าง Datalist สะดวกกว่า รหัสด้านหน้า -สิ้นสุดมีดังนี้:
รหัส HTML:
<! equiv = x-ua ที่เข้ากันได้> <meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0> <meta name = คำอธิบายเนื้อหา => <meta name = เนื้อหาผู้เขียน => <script src = ../ ./. common/content/jquery-1.7.2.min.jstype=tex vascript> </script> <script src = .././common/js/js/ajaxjson.js type = text/javascript> </script> <script src = ../common/js/Setting.js type = text/javascript> </script> <script src = ../common/js/paging.js type = text/javascript> </script> <script src = ../../warehousemanage/testyy .js type = text /javascript> </script> </head> <body class => <!-<! class = content> <div class = ส่วนหัว> <h1 id = adu class = page-title> การทดสอบกล่องแบบเลื่อนลง </h1> </div> <div class = container-fluid> <div classs = row-fluid> <!----------------------- 多条件查询 ------------ ----- ---------------------------------> <div class = well id = searchDemo> <p> ข้อมูลการทดสอบ (ค่าเริ่มต้นคือ D00001): <br> Kunshan Mainland Accessories Co. , Ltd. KSDLPJYXGS <BR> Yizhen Enterprise Co. , Ltd. YzQyyxgs <br> Taizhou Anxiang โรงงานผิวหนัง P> </div> การจับคู่แบบไดนามิกตามชื่อซัพพลายเออร์ (จีนหรือพินอินสามารถใช้ได้): <รายการอินพุต = bro id = ชื่อ oninput = this.value = this.value.replace (/^ +| +$/g , ''); ค้นหา ('ชื่อ', 'bro', 'ชื่อ')> <datalist id = bro> </tatalist> </div> </div> </body> <! ------- ----------------------------- ----------------- footer ---------------------------> <footer class = foot> </footer> </html>รหัส JavaScript:
var listobj = null; I nput tag id * datalistid: id * itemName ของแท็กข้อมูล: ค่าคีย์ที่ต้องการในข้อมูล JSON ที่ส่งคืนในพื้นหลัง (เฉพาะชื่อแอตทริบิวต์ของฟิลด์จีนในรูปแบบ) * */ ฟังก์ชั่นการค้นหา (inputId, datalistid, itemName ) {อินพุต) เนื้อหา = document .getElementById (inputId); เด็ก ๆ ; InputContent.value = null; // 检测出是拼音首字母 data = type = searchwords¶m = +inputcontent.value; / หมายเหตุ: URL ---------------------------------------------------------- ---------------------------------------------------------- ----------------------------------- จำเป็นต้องปรับแต่ง SendRequest (โพสต์, URL, ข้อมูล, ข้อมูล, getResult);} อื่นถ้า (/^[/u4e00-// u4e00-/u9fa5]*$/. ทดสอบ (inputcontent.value)) {// 检测出是中文 data = type = searchchinese¶m =+inputcontent.value ; โพสต์, URL, ข้อมูล, getResult); รับประกันเพียง 10 ถ้า (jdata.length <= 10) {maxlength = jdata.length;} var sub = listobj.childnodes; (sub [i]); ล้างค่าของกล่องอินพุตในกล่องอินพุต; ^[a-za-z]*$/ alue)) {obj.value = indexoBj [requestItem];} listobj.aphendchild (obj);} var subfix = document.createelement (ตัวเลือก); ;ข้างต้นคือการจับคู่แบบไดนามิกของ Datalist ฉลากใหม่ของ HTML5 เพื่อใช้งานกล่องอินพุตและข้อมูลฐานข้อมูลพื้นหลังฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!