<input type="text" id="searchInput" oninput="searchDatabase()" placeholder="武器"> <input type="text" id="1" oninput="searchDatabase()" placeholder="武器"> <input type="text" id="2" oninput="searchDatabase()" placeholder="武器"> <input type="text" id="3" oninput="searchDatabase()" placeholder="武器"> <div id="searchResult"></div> <script> // 您的数据列表 var arr_YXwuqi = [ ["亘古之守望", "凯旋骑士", "天堂之刃", "天堂之刃★", "弗鲁梅格之剑", "战场余晖", "星辰之剑", "红辰光巨剑", "红辰光巨剑★", "红长剑★", "通魔战刃", "鱼肠剑"], ["不朽巨人", "创世巨人", "屠戮角斗斧", "帝王战斧", "泣血巨人", "狂魔之斧", "皇族长柄斧", "红角斗士之斧★", "红雷矢巨斧", "红雷矢巨斧★", "裂狱", "黄昏"] ]; function searchDatabase() { // 获取输入框的值 var keyword = document.getElementById("searchInput").value; // 在数据列表中搜索匹配的数据 var searchResults = []; for (var i = 0; i < arr_YXwuqi.length; i++) { for (var j = 0; j < arr_YXwuqi[i].length; j++) { if (arr_YXwuqi[i][j].includes(keyword)) { searchResults.push(' ' + arr_YXwuqi[i][j]); } } } // 显示搜索结果 var searchResultElement = document.getElementById("searchResult"); if (searchResults.length > 0) { searchResultElement.innerHTML = "搜索结果:" + generateClickableResults(searchResults); } else { searchResultElement.innerHTML = "未找到匹配的数据"; } } function generateClickableResults(results) { var clickableResults = ""; for (var i = 0; i < results.length; i++) { clickableResults += "<span onclick='fillInput(\"" + results[i] + "\")'>" + results[i] + "</span>"; } return clickableResults; } function fillInput(value) { document.getElementById("searchInput").value = value; } </script>让四个input输入框都能实现id= "searchinput"的输入框的功能,而且它们搜索的都是一个数据列表
时间: 2023-08-14 11:08:54 浏览: 128
jquery实现input搜索输入关键词后自动筛选相关信息效果
您可以通过将每个输入框的 `oninput` 事件绑定到 `searchDatabase()` 函数来实现四个输入框都能搜索相同的数据列表。下面是修改后的代码:
```html
<input type="text" id="searchInput" oninput="searchDatabase()" placeholder="武器">
<input type="text" id="1" oninput="searchDatabase()" placeholder="武器">
<input type="text" id="2" oninput="searchDatabase()" placeholder="武器">
<input type="text" id="3" oninput="searchDatabase()" placeholder="武器">
<div id="searchResult"></div>
<script>
// 您的数据列表
var arr_YXwuqi = [
["亘古之守望", "凯旋骑士", "天堂之刃", "天堂之刃★", "弗鲁梅格之剑", "战场余晖", "星辰之剑", "红辰光巨剑", "红辰光巨剑★", "红长剑★", "通魔战刃", "鱼肠剑"],
["不朽巨人", "创世巨人", "屠戮角斗斧", "帝王战斧", "泣血巨人", "狂魔之斧", "皇族长柄斧", "红角斗士之斧★", "红雷矢巨斧", "红雷矢巨斧★", "裂狱", "黄昏"]
];
function searchDatabase() {
// 获取输入框的值
var keyword = document.getElementById("searchInput").value;
// 在数据列表中搜索匹配的数据
var searchResults = [];
for (var i = 0; i < arr_YXwuqi.length; i++) {
for (var j = 0; j < arr_YXwuqi[i].length; j++) {
if (arr_YXwuqi[i][j].includes(keyword)) {
searchResults.push(' ' + arr_YXwuqi[i][j]);
}
}
}
// 显示搜索结果
var searchResultElement = document.getElementById("searchResult");
if (searchResults.length > 0) {
searchResultElement.innerHTML = "搜索结果:" + generateClickableResults(searchResults);
} else {
searchResultElement.innerHTML = "未找到匹配的数据";
}
}
function generateClickableResults(results) {
var clickableResults = "";
for (var i = 0; i < results.length; i++) {
clickableResults += "<span onclick='fillInput(\"" + results[i] + "\")'>" + results[i] + "</span>";
}
return clickableResults;
}
function fillInput(value) {
document.getElementById("searchInput").value = value;
}
</script>
```
这样,四个输入框都能实现与 `id="searchInput"` 的输入框相同的搜索功能,并且它们搜索的都是同一个数据列表。
阅读全文