input搜尋提示功能--基於jquery框架
阿新 • • 發佈：2019-02-01
因需求，網站需要一個搜尋提示功能，本想用html5原生控制元件實現，
但部分瀏覽器相容性不好，最後還是自己用jquery實現功能。
效果圖
Html程式碼
<section class="search">
<div class="row">
<input type="text" placeholder="搜尋" id="Search" name="search">
</div>
</section>CSS樣式
.search{
width 核心Javascript
//執行程式碼
window.onload = ListenerSearch();
//實時監控搜尋框文字輸入事件
function ListenerSearch(){
var name = ['1','2','33','41','15','董祕課堂','董祕資料'];
//實時監控文字輸入
$("input[name='search']").bind('input propertychange',function () {
QueryKeyword($(this).val(),name);
});
}
//檢索數組裡是否有對應關鍵詞
function QueryKeyword(SearchName,ArrayList) {
//初始化陣列
var Keyword = [];
//遍歷陣列內容
for(var i = 0; i < ArrayList.length; i++){
//查詢判斷陣列內是否包含關鍵詞
if(SearchName.length != 0){
//搜尋框輸入資料全等於陣列內字串引數
if(SearchName === ArrayList[i].substr(0,SearchName.length)){
//新增資料
Keyword.push(ArrayList[i]);
}
}
}
if(Keyword.length != 0){
//建立table表單
CreateTable(Keyword);
} else {
//刪除table表單
RemoveTable();
}
}
//監控table表單點選事件,修改input內容
function TableOnclick(id) {
$("#Search").val($("#"+id).html());
$("#Table").remove();
}
//建立table表單
function CreateTable(Keyword) {
var TableContent = "";
for(var i = 0; i < Keyword.length; i++){
TableContent += "" +
"<tr>" +
"<td id='"+i+"' onclick='TableOnclick(this.id)'>"+Keyword[i]+"</td>" +
"</tr>";
}
//table表單不存在時進行建立
if(!document.getElementById("#Table")){
var Table = document.createElement('table');
Table.id = "Table";
$(".search").append(Table);
}
$("#Table").html(TableContent);
}
//刪除table表單
function RemoveTable() {
$("#Table").remove();
}注意：以上程式碼只是通過靜態陣列進行互動，若想動態互動，將ListenerSearch（）函式下的name引數改成通過ajax取得的陣列引數即可。
瀏覽器相容
- 目前，還沒測試相容瀏覽器，若有問題，還請在留言處提出。