<input type="text" id="searchInput" 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 = "搜索结果:" + searchResults.join(", "); } else { searchResultElement.innerHTML = "未找到匹配的数据"; } } </script>对这段代码改进,实现检索结果能够通过点击输入到input框中
时间: 2023-08-11 09:05:35 浏览: 128
要实现点击检索结果后将结果输入到输入框中,您可以进行以下修改:
```html
<input type="text" id="searchInput" 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>
```
在上述代码中,我添加了一个新的函数 `generateClickableResults`,该函数会生成可点击的结果列表,并通过调用 `fillInput` 函数来将结果填充到输入框中。每个结果都被包裹在 `<span>` 标签中,并且绑定了点击事件,点击结果时会调用 `fillInput` 函数来填充输入框。
请注意,在生成可点击的结果列表时,我使用了双引号来包裹结果的值,以确保在调用 `fillInput` 函数时可以正确传递值。
阅读全文