<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input自動補全</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>
<style>
#searchForm {
z-index: 999;
position: absolute;
top: 10px;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
}
#query {
width: 300px;
font-size: 16px;
height: 34px;
line-height: 34px;
box-sizing: border-box;
outline: 1;
border: 1px solid #d3d3d3;
}
#query:focus {
border: 1px solid #2d78f4;
}
#search {
width: 100px;
height: 34px;
color: #fff;
font-family: arial;
border: none;
vertical-align: top;
outline: none;
background-color: #38f;
}
#search:hover {
background-color: #2d78f4;
cursor: pointer;
}
.auto {
width: 300px;
border: 1px solid #dedede;
border-top: none;
position: absolute;
}
.auto_out {
width: 300px;
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;
}
</style>
<body>
<div id="searchForm">
<input id='query' type="text" class="auto-inp" onBlur="shijiao()"></input>
<button id="search">搜索一下</button>
<div class="auto hidden" id="auto">
</div>
</div>
<script type="text/javascript" src="js/auto.js"></script>
<script>
var array = ['七里香', 'b0', 'b12', 'b22', '固戍', 'b4', 'b5', 'b6', '如果愛', 'b7', 'b8', 'b2', 'abd', 'ab', '西鄉', 'accd', 'abd', 'qq音樂', 'b1', 'cd', 'ccd', 'cbcv', '小王子', 'cxf', 'b0'];
var autoComplete = new AutoComplete("query", "auto", array);
document.getElementById("query").onkeyup = function(event) {
autoComplete.start(event);
}
//模糊查詢方法失焦事件
function shijiao() {
$("#auto").empty();
};
</script>
</body>
</html>
// 數組去重
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);
}
}
![]()
