I have a ‘live’ searchbar for name lookup using jquery, and i want to be able to click a name from the provided results. That name would then stay in the searchbar while a new textarea opens below. Any direction or help would be greatly appreciated. Code:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Bar</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
</head>
<body></body>
<div class="container" style="width: 900px;">
<h2 align="center">Alt telecom</h2>
<h3 align="center">Client Data</h3>
<br /><br />
<div align="center">
<input
type="text"
name="search"
id="search"
placeholder="Search Clients"
class="form-control"
/>
</div>
<ul class="list-group" id="result"></ul>
<br />
<script>
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#search").keyup(function () {
$("#result").html("");
$("#state").val("");
var searchField = $("#search").val();
var expression = new RegExp(searchField, "i");
$.getJSON("data.json", function (data) {
$.each(data, function (key, value) {
if (
value.name.search(expression) != -1 ||
value.location.search(expression) != -1
) {
$("#result").append(
'<li class="list-group-item link-class">' +
value.name +
' | <span class="text-muted">' +
value.location +
"</span></li>"
);
}
});
});
});
});
</script>
</div>
</html>