I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter
To implement the above requirement, you can refer to the following code snippet.
Adding form with input for searching functionality in _Layout.cshtml
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<form id="f_search" method="get" asp-action="Search">
<div class="form-group">
<div class="input-group">
<input id="ipt_search" type="search" class="form-control" name="SearchTerm" />
<span class="input-group-btn">
<button class="btn btn-default">
Search
</button>
</span>
</div>
</div>
</form>
</li>
</ul>
</div>
JS code of checking keydown event and user input
<script>
$(function () {
$('#f_search input').keydown(function (e) {
var searchTerm = $("#ipt_search").val();
if (searchTerm == "" && event.keyCode === 13) {
e.preventDefault();
return false;
}
});
})
</script>
Action method of Search
public IActionResult Search(string SearchTerm)
{
//...
//do query based on SearchTerm
//code logic here
//...
return View();
}
Test Result
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…