На веб-странице я хочу выбрать один из моих результатов и распечатать их в консоле.
Что работает: поиск в JSON -данных с предохранителем. js и распечатать все результаты на веб-сайте.
Что я хочу: выберите результат поиска на веб-сайте и распечатайте выбранное с помощью результатов в консоли.
Я рад любым функциям, примерам или коду.
Код показывает, как я ищу и распечатываю результаты:
const searchDocs = document.querySelector('search')
const showSearchResult = document.querySelector('#showSearchResult')
fetch('http://localhost:3000/docs').then((response)=> {
response.json().then((data)=>{
console.log(data)
$(document).ready(function(){
$('#search').keyup(function(){
var searchValue = ($('#search').val().trim())
console.log(searchValue)
if(searchValue !=''){
const options = {
includeScore: true,
keys: ['titel']
}
var fuse = new Fuse(data, options)
const searchResult = fuse.search(searchValue)
console.log(searchResult)
if (searchResult.length > 0) {
$('#results').empty();
for( i =0; i< searchResult.length; i++){
$('#results').append('<div class ="res"><h3>'+searchResult[i].item.titel+
'</h3><p>'+searchResult[i].item.absender+ '</p><div>')
}
} else {
return console.log(error)
}
}
})
})
})
})
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<main>
<style>
.bar {
padding: 10px 20 px;
font-size: 20px;
}
.res {
font-family: Arial, Helvetica, sans-serif;
border: solid 1px rgb(189,189,189);
padding: 10px 10px;
margin-bottom: 1px;
}
</style>
<label for="search">Search Criteria </label>
<input type="search" id="search" class="bar" placeholder="Free Text Search"</input>
<div id="results">
<div class="res">
<h3> Result-Title</h3>
<p>Result-Info</p>
</div>
</div>
</div>
<script src="../js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.0.0"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>