一直想找一個可以連接后台，可以根據后台內容的input輸入框，可以實現聯想功能，網上找到一個簡單的靜態頁面的輸入框聯想，經過一番修改之后終於可以實現讀取自己定義的數組的聯想了，其實也比較簡單就是格式的問題。還是直接上代碼吧。
首先是一個簡單的界面
auto.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input自動補全</title> <link rel="stylesheet" type="text/css" href="auto.css" /> </head> <body> <div class="wrap"> <input type="text" id="input" class="auto-inp"> <div class="auto hidden" id="auto"> <div class="auto_out">1</div> <div class="auto_out">2</div> </div> </div> <%String[] a = {"a12","124","15"}; out.print(a[1]); %> <script src="auto.js"></script> <script> //var array = ['b12','b22','固戍','b4','b5','b6','如果愛','b7','b8','b2','abd','ab','西鄉','accd','abd','qq音樂','b1','cd','ccd','cbcv','小王子','cxf','b0']; var array=[ <%for(int i = 0 ; i < a.length;i++) { %> '<%=a[i]%>', //一定要加上單引號 <% } %> ] var autoComplete = new AutoComplete("input","auto",array); document.getElementById("input").onkeyup = function(event){ autoComplete.start(event); } </script> </body> </html>
為了實現聯想的內容是自己程序里的數組，我用了一個循環，將java中的數組添加到了js中，改了好長時間，后來才想到，對於js數組中還有其固定的格式，加了一個‘ <%=a[]%>’號之后就成了
然后對界面進行設計
auto.css
div,p,h1,h2,h3,h4,h5,h6,ul,li,span,input{ box-sizing: border-box; font: 14px/20px "microsoft yahei"; } div.wrap{ width: 240px; margin: 20px auto 0 auto; } .auto-inp{ width: 240px; height: 36px; padding-left: .5em; border-radius: 2px; border: 1px solid #dedede; color: #666; outline: none; } .auto{ width: 240px; border: 1px solid #dedede; border-top: none; position: absolute; } .auto_out{ width: 238px; height: 36px; line-height: 36px; padding-left: .5em; color: #000; background: #fff; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .auto_out.on{ background: #eee; cursor: pointer; } .hidden{ display: none; }
然后就是主要起作用的部分了
auto.js:
// 數組去重 Array.prototype.unique = function(){ this.sort(); var res = []; var json = {}; for (var i = 0; i < this.length; i++) { if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res; } // 對樣式操作 var setClass = { hasClass: function(elements,cName){ // 判斷是否含有某個class if(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") )) return true; else return false; }, addClass: function(elements,cName){ // 添加class if( !this.hasClass( elements,cName ) ){ elements.className += " " + cName; }; }, removeClass: function(elements,cName){ // 移除某個class if( this.hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); } } } var Bind = function(This){ return function(){ This.init(); } } function AutoComplete(input,auto,arr) { this.obj = document.getElementById(input); this.autoObj = document.getElementById(auto); this.search_value = ""; //當前的搜索輸入值 this.index = -1; //當前選中的DIV的索引 this.value_arr = arr; //數據庫中供檢索的值 不包含重復值 } AutoComplete.prototype = { // 初始化 init: function(){ var This = this; setClass.removeClass(This.autoObj,"hidden"); this.autoObj.style.left = this.obj.offsetLeft + "px"; this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px"; }, //刪除自動完成需要的所有DIV deleteDIV: function(){ while(this.autoObj.hasChildNodes()){ this.autoObj.removeChild(this.autoObj.firstChild); } setClass.addClass(this.autoObj,"hidden"); }, autoOnmouseover: function(index){ if(index != this.index){ setClass.addClass(this.autoObj.children[index],"on"); setClass.removeClass(this.autoObj.children[this.index],"on"); this.index = index; } }, setValue: function(This){ return function(){ This.obj.value = this.seq; setClass.addClass(This.autoObj,"hidden"); } }, // 響應鍵盤 pressKey: function(event){ var code = event.keyCode; var length = this.autoObj.children.length; if(code == 38){ //↑ setClass.removeClass(this.autoObj.children[this.index],"on"); this.index--; if(this.index < 0){ this.index = length - 1; } setClass.addClass(this.autoObj.children[this.index],"on"); this.obj.value = this.autoObj.children[this.index].seq; }else if(code == 40){ //↓ setClass.removeClass(this.autoObj.children[this.index],"on"); this.index++; if(this.index > length-1){ this.index = 0; } setClass.addClass(this.autoObj.children[this.index],"on"); this.obj.value = this.autoObj.children[this.index].seq; }else{ //回車 this.obj.value = this.autoObj.children[this.index].seq; setClass.addClass(this.autoObj,"hidden"); this.index = -1; } }, // 程序入口 start: function(event){ event = event || window.event; var code = event.keyCode; var This = this; if(code != 13 && code != 38 && code != 40){ this.init(); this.deleteDIV(); this.search_value = this.obj.value; var valueArr = this.value_arr.unique(); //去掉前后空格不能為空 if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){ return;} //判斷數組中是否含有輸入的關鍵字 try{ var reg = new RegExp("("+ this.obj.value +")","i"); //輸入"aaa" 則 reg = /(aaa)/i }catch(e){ alert(e.message); } var div_index = 0; //記錄匹配索引個數 for (var i = 0; i < valueArr.length; i++) { if(reg.test(valueArr[i])){ var div = document.createElement("div"); div.className = "auto_out"; div.seq = valueArr[i]; div.index = div_index; div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>"); this.autoObj.appendChild(div); setClass.removeClass(this.autoObj,"hidden"); div_index++; if(div_index == 1) { setClass.addClass(this.autoObj.firstChild,"on"); this.index = 0; } div.onmouseover = function(){ This.autoOnmouseover(this.index); } div.onclick = this.setValue(This); } } }else{ this.pressKey(event); } window.onresize = Bind(This); } }