В реальных проектах мы можем изменить получение данных на динамическое приобретение AJAX, в getContent ()
<! Doctype> <html> <head> <title> JS/JQuery реализует, аналогично функции поиска Baidu </title> <Meta name = "Author" Content = "Michael"> <meta name = "Keywords" Content = "JS/JQuery понимает, что FUNCTION BAIDU SEARK"> <Meta = "Description" js/jquery Reallized с аналогичным образом Baid Клавиатура "> <meta http-equiv =" content-type "content =" text/html; type = "text/css">#контейнер {позиция: абсолют; слева: 50%; top: 40%;}#Содержание {float: слева; Положение: относительно; справа: 50%;} input {граница: 0; ширина: 288px; высота: 30px; font-size: 16px; Padding: 0 5px; Line-Height: 30px; 5px; coursor: pointer;}. Addbg {founal: #87a900;}. First {Border: Solid #87a900 2px; ширина: 300px;} #Приложение {граница: Solid #87a900 2px; граница: 0; отображение: нет;} </style> </head> <body> <div Id = "Diver". id = "content"> <div> <input id = "kw" onkeyup = "getContent (this);" /> </div> <div id = "append"> </div> </div> <script type = "text/javascript"> var data = [«Привет, я - Майкл», «Кто ты», «Ты лучший», «Ты самый ценный», «Ты мой лучший друг», «Ты мой лучший друг», «Ты», «Ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты, ты мой eyes "]; $ (document) .ready (function () {$ (document) .keydown (function (e) {e = e || window.event; var keycode = e.which? (KeyCode == 40) {if (jquery.trim ($ ("#append"). html ()) == "") {return;} $ ("#kw"). blur (); if ($ (". item"). Hasclass ("addbg")) {movenext (); {$ (". item"). removeClass ('addBg'). EQ (0) .AdClass ('addBg');}} else if (keycode == 13) {dojob ();}}); var oveprev = function () {$ ("#kw"). == 0) {$ (". Item"). RemoveClass ('addBg'). EQ ($ (". Item"). Длина - 1) .AdDCLASS ('addBg');} else {$ (". Item"). RemoveClass ('addBg'). Eq (index - 1). $ (". addbg"). prevall (). Length; if (index == $ (". item"). Length - 1) {$ (". item"). removeClass ('addbg'). EQ (0) .AdDclass ('AddBg');} else {$ (". Item"). 1) .AdDClass ('addBg');}} var dojob = function () {$ ("#kw"). Blur (); var value = $ (". Addbg"). Text (); $ ("#kw"). Val (value); jquery.trim ($ (obj) .val ()); if (kw == ") {$ ("#append "). hide (). html (" "); вернуть false;} var html =" "; for (var i = 0; i <data "<div class = 'item' onmouseenter = 'getfocus (this)' onclick = 'getCon (this);'>" + data [i] + "</div>"}} if (html! = "") {$ ("#adpend"). Show (). html (html); {$ ("#append"). hide (). html ("");}} function getFocus (obj) {$ (". item"). removeClass ("addbg"); $ (obj) .AddClass ("addBg"); $ (obj) .text (); $ ("#kw"). val (value); $ ("#append"). hide (). html ("");} </script> </body> </html>Выше приведено подсказка нечеткой совпадения для автоматической раскрывающейся коробки JS имитации Baidu, представленной редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит всем вовремя!