<input type="text" id="searchInput" oninput="searchDatabase()" placeholder="武器"> <input type="text" id="1" placeholder="武器"> <input type="text" id="2" placeholder="武器"> <input type="text" id="3" 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输入框独立实现输入关键字,对数据列表搜索相关内容,并且点击结果可以直接传到input输入框中
时间: 2023-08-14 09:08:54 浏览: 59
要实现四个输入框独立实现输入关键字、搜索数据列表并将结果点击后传递到相应的输入框中,您可以进行以下修改:
```html
<input type="text" id="searchInput" oninput="searchDatabase('searchInput')" placeholder="武器">
<input type="text" id="1" oninput="searchDatabase('1')" placeholder="武器">
<input type="text" id="2" oninput="searchDatabase('2')" placeholder="武器">
<input type="text" id="3" oninput="searchDatabase('3')" placeholder="武器">
<div id="searchResult"></div>
<script>
// 您的数据列表
var arr_YXwuqi = [
["亘古之守望", "凯旋骑士", "天堂之刃", "天堂之刃★", "弗鲁梅格之剑", "战场余晖", "星辰之剑", "红辰光巨剑", "红辰光巨剑★", "红长剑★", "通魔战刃", "鱼肠剑"],
["不朽巨人", "创世巨人", "屠戮角斗斧", "帝王战斧", "泣血巨人", "狂魔之斧", "皇族长柄斧", "红角斗士之斧★", "红雷矢巨斧", "红雷矢巨斧★", "裂狱", "黄昏"]
];
function searchDatabase(inputId) {
// 获取输入框的值
var keyword = document.getElementById(inputId).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, inputId);
} else {
searchResultElement.innerHTML = "未找到匹配的数据";
}
}
function generateClickableResults(results, inputId) {
var clickableResults = "";
for (var i = 0; i < results.length; i++) {
clickableResults += "<span onclick='fillInput(\"" + results[i] + "\", \"" + inputId + "\")'>" + results[i] + "</span>";
}
return clickableResults;
}
function fillInput(value, inputId) {
document.getElementById(inputId).value = value;
}
</script>
```
现在,每个输入框都可以独立地输入关键字并搜索数据列表。搜索结果将显示在 `searchResult` 元素中,并且可以通过点击结果将其传递到相应的输入框中。