基于JavaScript实现可搜索的表格
作者：刻刻帝的海角
在Web开发中,数据表格是常见的数据展示形式,这篇文章主要为大家详细介绍了如何使用JavaScript来实现这个功能,感兴趣的小伙伴可以跟随小编一起学习一下
一、引言
在Web开发中，数据表格是常见的数据展示形式。然而，传统的表格功能有限，不能很好地满足现代用户的需求。一个常见的需求是让用户能够搜索表格中的数据。下面，我将向您展示如何使用JavaScript来实现这个功能。
二、实现步骤
创建HTML表格
首先，我们需要创建一个HTML表格。这个表格将包含一些数据，以便我们可以在JavaScript中操作它。以下是一个简单的HTML表格示例
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
创建搜索框和按钮
接下来，我们需要创建一个搜索框和一个按钮，以便用户可以搜索表格中的数据。以下是一个简单的HTML搜索框和按钮示例：
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索.."> <button onclick="myFunction()">搜索</button>
CSS (可选，用于美化搜索建议)
#suggestionsContainer {
position: absolute;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
width: 200px;
max-height: 200px;
overflow-y: auto;
}
#suggestionsContainer div {
padding: 5px;
cursor: pointer;
}
#suggestionsContainer div:hover {
background-color: #eee;
}
编写JavaScript代码实现搜索功能
function myFunction() {
// 获取输入框的值和表格元素
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase(); // 将输入值转换为大写字母，以便进行不区分大小写的搜索
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr"); // 获取表格中的所有行元素
// 遍历表格中的每一行，并检查是否包含输入值
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // 获取当前行的第一个单元格元素（即姓名单元格）
if (td) { // 如果单元格存在，则进行下一步操作（防止空行）
txtValue = td.textContent || td.innerText; // 获取单元格的文本内容，以便进行比较操作
if (txtValue.toUpperCase().indexOf(filter) > -1) { // 如果单元格文本中包含输入值，则显示该行，否则隐藏该行
tr[i].style.display = ""; // 显示行元素（将display属性设置为空字符串）
} else { // 如果单元格文本中不包含输入值，则隐藏该行（将display属性设置为"none"）
tr[i].style.display = "none"; // 隐藏行元素（将display属性设置为"none"）
}
}
}
}
要在JavaScript中实现一个搜索框，你可以创建一个HTML输入元素，然后使用JavaScript监听该输入元素的input事件。当用户在搜索框中输入时，input事件会被触发，然后你可以根据用户的输入来执行你想要的操作。
下面是一个简单的例子，当用户在搜索框中输入时，会触发一个函数来过滤一个数组并显示匹配的项：
HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索.."> <ul id="myList"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> </ul>
JavaScript:
function myFunction() {
// 获取输入框的值和列表元素
var input, filter, list, i, txtValue, li, found;
input = document.getElementById("myInput");
filter = input.value.toUpperCase(); // 将输入值转换为大写字母，以便进行不区分大小写的搜索
list = document.getElementById("myList");
found = []; // 创建一个空数组来存储匹配的项
// 遍历列表中的每一项，并检查是否包含输入值
for (i = 0; i < list.children.length; i++) {
li = list.children[i];
txtValue = li.textContent || li.innerText; // 获取列表项的文本内容，以便进行比较操作
if (txtValue.toUpperCase().indexOf(filter) > -1) { // 如果列表项文本中包含输入值，则将该项添加到匹配数组中
found.push(li); // 将匹配的项添加到数组中
}
}
// 将匹配的项添加到列表中（显示它们）
for (i = 0; i < found.length; i++) {
list.appendChild(found[i]); // 将匹配的项添加回列表中（显示它们）
}
}
如果你需要一个更复杂的搜索框，可以考虑添加一些高级功能，比如搜索建议（autocomplete）、搜索高亮、延迟搜索（debounce）以减少不必要的处理、从远程数据源获取数据等。
下面是一个例子，展示了如何结合搜索建议和从模拟的远程数据源获取数据来实现一个复杂的搜索框。
HTML:
<input type="text" id="searchInput" placeholder="搜索..."> <div id="suggestionsContainer"></div>
CSS (可选，用于美化搜索建议):
#suggestionsContainer {
position: absolute;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
width: 200px;
max-height: 200px;
overflow-y: auto;
}
#suggestionsContainer div {
padding: 5px;
cursor: pointer;
}
#suggestionsContainer div:hover {
background-color: #eee;
}
JavaScript:
// 模拟远程数据源
const remoteData = [
'Apple',
'Banana',
'Cherry',
'Date',
'Elderberry',
'Fig',
'Grape',
'Honeydew',
'Icaco',
'Jackfruit'
];
// 获取搜索框和建议容器元素
const searchInput = document.getElementById('searchInput');
const suggestionsContainer = document.getElementById('suggestionsContainer');
// 显示搜索建议的函数
function showSuggestions(query, suggestions) {
suggestionsContainer.innerHTML = '';
query = query.toUpperCase();
suggestions.forEach(suggestion => {
const suggestionUpper = suggestion.toUpperCase();
if (suggestionUpper.startsWith(query)) {
const suggestionElement = document.createElement('div');
suggestionElement.textContent = suggestion;
suggestionElement.addEventListener('click', () => {
searchInput.value = suggestion;
suggestionsContainer.style.display = 'none';
});
suggestionsContainer.appendChild(suggestionElement);
}
});
if (suggestionsContainer.children.length > 0) {
suggestionsContainer.style.display = 'block';
} else {
suggestionsContainer.style.display = 'none';
}
}
// 从远程数据源获取搜索建议（模拟）
function getRemoteSuggestions(query, callback) {
// 假设这里有一个异步操作，比如Ajax调用
setTimeout(() => {
// 过滤出包含查询字符串的建议
const filteredSuggestions = remoteData.filter(item =>
item.toUpperCase().startsWith(query.toUpperCase())
);
// 调用回调函数返回建议
callback(filteredSuggestions);
}, 500); // 延迟500毫秒模拟网络请求
}
// 监听搜索框的输入事件
searchInput.addEventListener('input', function() {
const query = this.value.trim();
// 清空建议容器
suggestionsContainer.innerHTML = '';
// 如果查询字符串不为空，则从远程数据源获取建议
if (query !== '') {
getRemoteSuggestions(query, showSuggestions);
} else {
suggestionsContainer.style.display = 'none';
}
});
// 监听搜索框外的点击事件，隐藏建议容器
document.addEventListener('click', function(event) {
if (!searchInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
suggestionsContainer.style.display = 'none';
}
});
这个例子中，我们创建了一个搜索框和一个建议容器。当用户在搜索框中输入时，我们会模拟一个异步请求来从远程数据源获取匹配的建议，并在建议容器中显示出来。用户可以直接从建议容器中选择一个建议，此时搜索框的值会被更新，建议容器会被隐藏。此外，我们还添加了一个事件监听器来隐藏建议容器，当用户点击搜索框外的任何地方时，建议容器会被隐藏。
请注意，这个例子中的getRemoteSuggestions函数使用了setTimeout来模拟异步操作，实际应用中你可能会使用fetch或XMLHttpRequest来从服务器获取数据。此外，这个例子中的搜索建议是基于字符串的前缀匹配，你可以根据需要修改匹配逻辑。
到此这篇关于基于JavaScript实现可搜索的表格的文章就介绍到这了,更多相关JavaScript可搜索表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！