js實現的文字框輸入內容自動提示效果程式碼
本章節分享一段這樣的例項程式碼,那就是當文字框輸入關鍵字的時候,能夠實現自動提示效果,這樣的功能在大量的網站使用,比如百度也有類似的功能,希望下面的程式碼能夠給大家帶來參考作用。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; } .auto_hidden{ width:204px;border-top:1px solid #333; border-bottom:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; position:absolute; display:none; } .auto_show{ width:204px; border-top:1px solid #333; border-bottom:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; position:absolute; z-index:9999; /* 設定物件的層疊順序 */ display:block; } .auto_onmouseover{ color:#ffffff; background-color:highlight; width:100%; } .auto_onmouseout{ color:#000000; width:100%; background-color:#ffffff; } </style> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } function AutoComplete(obj,autoObj,arr){ this.obj=$(obj); //輸入框 this.autoObj=$(autoObj);//DIV的根節點 this.value_arr=arr; //不要包含重複值 this.index=-1; //當前選中的DIV的索引 this.search_value=""; //儲存當前搜尋的字元 } AutoComplete.prototype={ //初始化DIV的位置 init: function(){ this.autoObj.style.left = this.obj.offsetLeft + "px"; this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px"; this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//減去邊框的長度2px }, //刪除自動完成需要的所有DIV deleteDIV: function(){ while(this.autoObj.hasChildNodes()){ this.autoObj.removeChild(this.autoObj.firstChild); } this.autoObj.className="auto_hidden"; }, //設定值 setValue: function(_this){ return function(){ _this.obj.value=this.seq; _this.autoObj.className="auto_hidden"; } }, //模擬滑鼠移動至DIV時,DIV高亮 autoOnmouseover: function(_this,_div_index){ return function(){ _this.index=_div_index; var length = _this.autoObj.children.length; for(var j=0;j<length;j++){ if(j!=_this.index ){ _this.autoObj.childNodes[j].className='auto_onmouseout'; } else{ _this.autoObj.childNodes[j].className='auto_onmouseover'; } } } }, //更改classname changeClassname: function(length){ for(var i=0;i<length;i++){ if(i!=this.index ){ this.autoObj.childNodes[i].className = 'auto_onmouseout'; } else{ this.autoObj.childNodes[i].className='auto_onmouseover'; this.obj.value=this.autoObj.childNodes[i].seq; } } }, //響應鍵盤 pressKey:function(event){ var length = this.autoObj.children.length; //游標鍵"↓" if(event.keyCode==40){ ++this.index; if(this.index>length){ this.index=0; } else if(this.index==length){ this.obj.value=this.search_value; } this.changeClassname(length); } //游標鍵"↑" else if(event.keyCode==38){ this.index--; if(this.index<-1){ this.index=length - 1; } else if(this.index==-1){ this.obj.value=this.search_value; } this.changeClassname(length); } //Enter鍵 else if(event.keyCode==13){ this.autoObj.className="auto_hidden"; this.index=-1; } else{ this.index=-1; } }, //程式入口 start: function(event){ if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){ this.init(); this.deleteDIV(); this.search_value=this.obj.value; var valueArr=this.value_arr; valueArr.sort(); if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值為空,退出 try{ var reg = new RegExp("(" + this.obj.value + ")","i");} catch (e){ return; } var div_index=0;//記錄建立的DIV的索引 for(var i=0;i<valueArr.length;i++){ if(reg.test(valueArr[i])){ var div = document.createElement("div"); div.className="auto_onmouseout"; div.seq=valueArr[i]; div.onclick=this.setValue(this); div.onmouseover=this.autoOnmouseover(this,div_index); div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜尋到的字元粗體顯示 this.autoObj.appendChild(div); this.autoObj.className="auto_show"; div_index++; } } } this.pressKey(event); window.onresize=Bind(this,function(){this.init();}); } } window.onload=function(){ var autoComplete=new AutoComplete('o','auto',['b22','b3','b4','b5','b6','b7','b8','b2','abd']); var o=document.getElementById("o"); o.onkeyup=function(){ autoComplete.start(event) } } </script> </head> <body> <div align="center"><input type="text" id="o"/></div> <div class="auto_hidden" id="auto"><!--自動完成 DIV--></div> </body> </html>
相關文章
- 文字框輸入內容實現智慧提示效果程式碼例項
- 實現文字框輸入內容提示程式碼例項
- js多個文字框輸入內容同步效果JS
- 點選文字框實現文字框內容選中效果
- 實現多個文字框輸入同步效果程式碼例項
- js實現文字框提示程式碼例項JS
- 兩個文字框同步輸入內容程式碼例項
- 在文字框輸入關鍵字會彈出內容提示程式碼例項
- JavaScript 文字框輸入內容同步JavaScript
- jQuery文字框輸入內容同步jQuery
- JS 文字輸入框放大鏡效果JS
- 密碼框輸入提示效果程式碼例項密碼
- 實現動態自動匹配輸入的內容
- jQuery文字框內容輸入同步功能jQuery
- 文字框內容輸入完畢觸發事件程式碼例項事件
- 實現輸入內容提示的功能(仿google_百度輸入框提示)jquery.ui.autocomplete.js外掛GojQueryUIJS
- 詳細實現微信輸入框效果(textView自適應文字高度)TextView
- 實現textarea文字框多行提示文字效果
- js實現的檢測文字框輸入是否是數字的程式碼JS
- js刪除文字框輸入內容前後兩端的空格JS
- 利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果Angular
- 拖動滾動條實現內容自動載入效果
- JS輸入框郵箱自動提示(帶有demo和原始碼)JS原始碼
- js實現的文字框只能夠輸入數字JS
- textarea文字框輸入文字數目倒計效果程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- 點選文字框刪除提示文字效果程式碼
- 文字框輸入完成自動跳入下一個程式碼例項
- jQuery實現的文字輸入字數倒計效果程式碼jQuery
- css input文字框中的內容居中效果CSS
- vue.js輸入框輸入值內容實時跟著變化Vue.js
- 獲取網頁中的密碼和文字輸入框的內容 (轉)網頁密碼
- CSS 自適應內容寬度的輸入框CSS
- 如何實現點選文字框刪除提示文字效果
- javascript驗證輸入文字框內容是否為數字JavaScript
- JavaScript 驗證輸入文字框內容是否為數字JavaScript
- 相容所有瀏覽器的密碼框輸入提示效果瀏覽器密碼
- Angular.js 限制輸入框輸入內容,為純數字AngularJS