실제 프로젝트에서는 getContent ()에서 데이터 수집을 Ajax 동적 획득으로 변경할 수 있습니다.
<! doctype> <html> <head> <title> js/jquery는 baidu 검색 함수와 유사하게 인식 </title> <meta name = "author"content = "michael"> <meta name = "keywords"content = "js/jquery baidu 검색 함수와 유사하게 실현됩니다. 키보드 "> <meta http-equiv ="content-type "content ="text/html; type = "text/css">#컨테이너 {위치 : 절대; 왼쪽; 왼쪽; 왼쪽; 상단 : 40%;}#content {float : 왼쪽; 위치 : 상대; 오른쪽; 오른쪽;} 입력 {porder : 0; 너비 : 288px; 높이 : 30px; font-size; 16px; 패드 : 30px;}. 5px; cursor : pointer;}. addBg {배경 : #87a900;}. 첫 번째 {Border : solid #87a900 2px; width : 300px;} #append {border : solid #87a900 2px; border-top : 0; none;} </style> <div id = ""컨텐츠 = ""컨텐츠. 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. (keyCode == 40) {if (jQuery.trim ($ ( "#append"). html ()) == ") {return;} $ ("#kw "). blur (); if ($ (". item "). {$ ( ". item"). RemoveClass ( 'addbg'). eq (0) .addclass ( 'addbg');}} else if (keycode == 13) {dojob ();}}); var moveprev = function () {$ ( "#kw"); addBg (indula). == 0) {$ ( ". item"). RemoveClass ( 'addBg'). $ ( ". addbg"). rempall (). 길이; if (index == $ ( ". 항목"). 길이 -1) {$ ( ". 항목"). removeClass ( 'addBg'). addClass ( 'addBg');} else {$ ( ". 항목"). 1) .addclass ( 'addBg');}} var dojob = function () {$ ( "#kw"). jquery.trim ($ (obj) .val ()); if (kw == "") {$ ( "#append"). hime (). html ( ""); return false;} var html = ""; for (var i = 0; i <data.length; i ++) {if (data [i]. 0) {) "<div class = 'item'onmouseEnter = 'getFocus (this)'onclick = 'getCon (this);'>"> " + data [i] +"</div> "}} if (html! =" ") {$ ("#부가 "). show (). html (html);} else {$ ( "#append"). hide (). html ( "");}} 함수 getfocus (obj) {$ ( ". item"). RemoveClass ( "addbg"); $ (obj) .addclass ( "addbg");} 함수 getcon (obj) {var value = $ (obj) .text (); $ ( "#kw"). val (value); $ ( "#부록"). hide (). html ( "");} </script> </body> </html>위는 편집자가 도입 한 JS 모방 Baidu 자동 드롭 다운 박스의 퍼지 매칭 프롬프트입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 모든 사람에게 답장 할 것입니다!