Bootstrap是一種流行的前端框架,廣泛應用于網站和應用程序的開發中。在Bootstrap中,使用JS可以輕松地操作JSON數據,以便在應用程序中添加搜索功能。以下是如何使用Bootstrap搜索JSON的簡單示例代碼。
(function() { 'use strict'; var searchInput = document.getElementById('searchInput'); // 獲取搜索輸入框 var json = [ { "name": "John Smith", "age": 25, "gender": "male" }, { "name": "Jane Doe", "age": 22, "gender": "female" }, { "name": "Bob Johnson", "age": 30, "gender": "male" } ]; // 一個簡單的JSON數據 searchInput.addEventListener("keyup", function() { // 監聽鍵盤事件 var searchValue = this.value.toLowerCase(); // 獲取搜索輸入框值,轉換成小寫字母 var filteredData = json.filter(function(obj) { // 過濾JSON數據 return Object.keys(obj).some(function(key) { return obj[key].toLowerCase().indexOf(searchValue) !== -1; // 搜索匹配 }); }); console.log(filteredData); // 輸出過濾后的數據 }); })();
在這個示例中,搜索輸入框的鍵盤事件被監聽。當用戶輸入內容時,JSON數據通過過濾器過濾,并使用Object.keys方法遍歷JSON數據中的鍵。使用some方法進行匹配搜索值并返回過濾后的數據。最后,使用console.log輸出過濾后的JSON數據。
因此,使用Bootstrap和上面提到的代碼示例,可以在應用程序中添加JSON搜索功能。