ในโครงการจริงเราสามารถเปลี่ยนการเก็บข้อมูลเป็น Ajax Dynamic Acquisition ใน GetContent ()
<! doctype> <html> <head> <title> js/jQuery ตระหนักถึงฟังก์ชั่นการค้นหา baidu </title> <meta name = "ผู้แต่ง" content = "Michael"> <meta name = "คำหลัก" เนื้อหา = "JS/jQuery คีย์บอร์ด "> <meta http-equiv =" content-type "เนื้อหา =" ข้อความ/html; {ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 40%;}#เนื้อหา {float: ซ้าย; ตำแหน่ง: สัมพัทธ์; ขวา: 50%;} อินพุต {เส้นขอบ: 0; ความกว้าง: 288px; ความสูง: 30px; font-size: 16px; padding: 0 5px; {พื้นหลัง: #87A900;}. First {Border: Solid #87A900 2px; Width: 300px;} #ผนวก {Border: Solid #87A900 2PX; Border-Top: 0; Display: None;} </style> onkeyup = "getContent (นี่);" /> </div> <div id = "ผนวก"> </div> </div> <script type = "text/javascript"> var data = ["สวัสดีฉันคือไมเคิล", "คุณคือใคร", "คุณคือคนที่ดีที่สุด", "คุณเป็นคนที่มีค่าที่สุด" Eyes "]; $ (เอกสาร) .ready (function () {$ (เอกสาร) .keydown (ฟังก์ชั่น (e) {e = e || window.event; var keycode = e.which? (keycode == 40) {ถ้า (jQuery.Trim ($ ("#ผนวก"). html ()) == "") {return;} $ ("#kw"). เบลอ (); ถ้า ("". รายการ "). hasclass (" addbg ")) {$ (". item"). RemoveClass ('addbg'). eq (0) .addclass ('addbg');}} อื่นถ้า (keycode == 13) {doJob ();}}); 0) {$ (". item"). RemoveClass ('addbg'). eq ($ (". item). ความยาว - 1) .addclass ('addbg');} else {$ (". item "). removeClass ('addbg') $ (". addbg"). prevall (). ความยาว; ถ้า (index == $ (". item"). ความยาว - 1) {$ (". item"). removeClass ('addbg'). eq (0) .addclass ('addbg'); 1) .addclass ('addbg');}} var dojob = function () {$ ("#kw"). blur (); var value = $ (". addbg"). text (); $ ("#kw"). val (val); jQuery.Trim ($ (obj) .val ()); ถ้า (kw == "") {$ ("#ภาคผนวก"). ซ่อน (). html (""); return false;} var html = "" สำหรับ (var i = 0; "<div class = 'item' onMouseEnter = 'getFocus (นี่)' onClick = 'getCon (นี่);'>" + data [i] + "</div>"}} ถ้า (html! = "") {$ ("#ภาคผนวก") {$ ("#ผนวก"). ซ่อน (). html ("");}} ฟังก์ชั่น getfocus (obj) {$ (". รายการ"). removeClass ("addbg"); $ (obj) .addclass ("addbg"); $ (obj) .text (); $ ("#kw"). val (value); $ ("#ผนวก"). ซ่อน (). html ("");} </script> </body> </html>ข้างต้นเป็นพรอมต์การจับคู่ที่คลุมเครือสำหรับกล่องแบบหล่นลงของ JS Imitation Baidu Automatic Automatic ที่แนะนำโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับทุกคนในเวลา!