JQuery是JavaScript的一個常用庫,它可以用來操作HTML文檔和處理事件。其中JQuery input搜索是一個非常有用的功能,可以幫助用戶快速查找信息。以下是使用JQuery實現input搜索功能的代碼:
$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) >-1) }); }); });
代碼中,我們首先通過文檔就緒事件$(document).ready()獲取輸入框和表格的元素。然后,我們通過on()方法監聽輸入框上的鍵盤事件keyup,這樣每次用戶按鍵時,搜索功能就會被觸發。
接下來,我們定義一個變量value,獲取輸入框中的值并將其轉化為小寫。$(this)指的是輸入框本身,val()方法獲取輸入框的值,toLowerCase()方法將輸入框的值轉化為小寫字母。
接下來,我們需要過濾表格中是否含有符合搜索條件的文本。通過filter()方法來遍歷每一個表格行,并根據匹配條件來判斷是否顯示該行。這里使用toggle()方法來顯示或隱藏表格行。
最后,我們將代碼放入$(document).ready()的回調函數中,當頁面準備就緒時,整個JQuery input搜索功能就會生效。