How an input field can filter recommendations
This is a simple example of how to connect an input field to a recommendation. So for each button press a new recommendation is made and the results are printed in a list. The list can be styled with CSS to fit the theme.
Put the code in an html document and open it in a browser.
Usage of term
The important thing is that the value in the field is added as a "term" in the parameters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Test</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="#" class="form" role="search">
<h3 class="text-center">Test</h3>
<label for="search-input" class="sr-only">Search by name</label>
<input
class="form-control"
id="search-input"
name="search"
type="text"
placeholder="Search by name"
autocomplete="off"
/>
<ul class="autocomplete-suggestions"></ul>
</form>
</div>
</div>
</div>
<!-- Rekai -->
<script src="https://static.rekai.se/12181abf.js"></script>
<script>
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
const value = event.target.value.trim() || "";
console.log("Current value:", value);
window.__rekai.predict({
params: {
srek: "b5bc057d",
projectid: "10741124",
nrofhits: 5,
term: value
}
}, (response) => {
console.log("Search results:", response);
const suggestionsContainer = document.querySelector(".autocomplete-suggestions");
suggestionsContainer.innerHTML = "";
response.predictions.forEach((predictionItem) => {
const listItem = document.createElement("li");
const anchor = document.createElement("a");
anchor.className = "autocomplete-suggestion";
anchor.textContent = predictionItem.title;
anchor.href = predictionItem.url;
listItem.appendChild(anchor);
suggestionsContainer.appendChild(listItem);
});
});
});
</script>
</body>
</html>