搜尋框輸入自動提示功能實現

• • html部分核心程式碼
  • JS部分核心程式碼

html部分核心程式碼

 <style>
.content input[type=text]{
        width: 150px;
        height: 32px;
        outline: none;
        padding-left: 8px;
    }
    .list{
        z-index: 2;
        position: absolute;
        background-color: #ffffff;
    }
    .list ul{
        width:120px ;
        clear: both;
        border: 1px solid #A9A9A9;
        display: none;
        list-style: none;
		margin:0px;
    }
    .list ul li{
        padding-left: 8px;
    }
    .list ul li:hover{
        background-color: #CCC;
    }
</style>
<div>
	<div class="layui-input-inline content" style="width: 150px; margin-right: 10px;">
			<input type="text" id="content" class="layui-input table-toolbar-ele" placeholder="請輸入搜尋內容" autocomplete="off">
	</div>
	<div class="list"><ul id="ul"></ul></div>
</div>
 

JS部分核心程式碼

var dataList=["001","002","003"];		//此處應為處理好的提示資料陣列，我僅舉例記錄

//輸入自助機編號搜尋提示
var ul=document.getElementById("ul");
var content_div=document.getElementById("content");

//當用戶離開輸入欄位時對其進行驗證：
content_div.onblur = function (){
     content_div.style.borderColor =
 
 "initial";
     ul.style.display = "none";
 }
//當元素獲得使用者輸入時執行的指令碼
content_div.oninput = function(){
    selectKeys();
}
content_div.onpropertychange = function(){
    selectKeys();
}
function selectKeys() {
           //var value=$("#content").val()		//Jquery寫法
           var
 
 value=document.getElementById("content").value;
           if(value != ""){
               ul.innerHTML = "";
               for (var i=0;i<dataList.length;i++) {
                   if(dataList[i].indexOf(value.toUpperCase())==0){
                       var li=document.createElement("li");
                       li.innerHTML=dataList[i];
                       li.onmousedown=function (){     //為li動態新增事件,(此處使用onmousedown而非onclick，主要解決onblur與onclick事件時的衝突問題)
                           //$("#content").val(this.innerHTML);	  //Jquery寫法
                           document.getElementById("content").value=this.innerHTML;
                       }
                       ul.appendChild(li);
                       ul.style.display="block";
                   }
               }
           }else{
               ul.style.display="none";
           }
   }