本文主要和大家分享JS實作輸入框智慧提示,主要以程式碼的形式和大家分享,希望能幫助大家。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script> var keyWords = { "传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"], "杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"], "杨": ["杨利伟", "杨振宇", "杨过"], "杨忠": ["杨忠科", "杨忠学", "杨忠爱国"] }; setInterval(function () { document.getElementById('txt').onchange(); }, 500); onload = function () { document.getElementById('txt').onchange = function () { if (document.getElementById('dv')) { document.body.removeChild(document.getElementById('dv')); } if (keyWords[this.value]){ var dvObj = document.createElement('p'); dvObj.id = 'dv'; dvObj.style.width = '300px'; dvObj.style.height = '200px'; dvObj.style.border = '1px solid green'; dvObj.style.position = 'absolute'; dvObj.style.left = this.offsetLeft + 'px'; dvObj.style.top = this.offsetTop + this.offsetHeight + 'px'; ulObj = document.createElement('ul'); ulObj.style.listStyleType = 'none'; ulObj.style.margin = '0'; ulObj.style.padding = '0'; for (var i = 0; i < keyWords[this.value].length; i++) { //创建Li var liObj = document.createElement('li'); liObj.innerText = keyWords[this.value][i]; //显示每一项内容 liObj.style.marginTop = '8px'; liObj.style.cursor = 'pointer'; //高亮显示 liObj.onmouseover = function () { this.style.backgroundColor = 'yellow'; }; liObj.onmouseout = function () { this.style.backgroundColor = ''; }; //添加到ul中 ulObj.appendChild(liObj); } //ulobj添加到层中 dvObj.appendChild(ulObj); //层添加到body中 document.body.appendChild(dvObj); } } } </script> </head> <body> <input type="text" id="txt"/> <input type="button" value="百度一下" /> </body> </html>
相關推薦:
#以上是JS實作輸入框智慧提示的詳細內容。更多資訊請關注PHP中文網其他相關文章!