I need to highlight the search term in returned search results? I searched a lot and read lots of articles but all of them are very much different from my structure
Here is my controller
public ActionResult Help(string searchString)
{
var repsearch = new RepositorySearch();
List<Question> question = new List<Question>();
if (!string.IsNullOrEmpty(searchString))
{
question = repsearch.GetAllQuestion().Where(n => n.Qu.Contains(searchString)).ToList();
}
return Request.IsAjaxRequest() ? (ActionResult)PartialView("_QuestionPartial", question) : View(question);
}
and here is my ajax
$('#FormSearch').submit(function (event) {
event.preventDefault();
var url = '/Home/Help?' + searchString;
$.ajax({
url: url,
type: 'POST',
cache: false,
data: { searchString: $('#search').val(); },
success: function (result) {
window.history.replaceState("#intagsname", "Title", url);
$('#intagsname').html(result);
}
});
});
Here is _QuestionPartial
@using iranhoidaytour_com.Models
@if (Model.Count > 0)
{
<ul>
@foreach (Question q in Model)
{
<li>
<h5>@q.Qu</h5>
<p>@q.Ans</p>
</li>
}
</ul>
}
How do I highlight the search term in returned search results?
Here is my html for the main view
<div class="row" id="searchhelp">
<div class="container">
@using (Html.BeginForm("Help", "Home", FormMethod.Get, new { @id = "FormSearch", @class = "form-group container" }))
{
@Html.TextBox("search", null, new { @class = "form-control col-md-10", @placeholder = "What Is Your Question?Enter Keyword!" })
<button type="submit" class="left " id="btn-search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
}
</div>
</div>
<div id="helpicons" class="container">
<div id="tagsname">
<div id="intagsname">
@Html.Partial("_QuestionPartial", Model)
</div>
</div>
</div>
You could use javascript to wrap any instances of the search text in an element with a class name
var container = $('#intagsname');
$('#FormSearch').submit(function (event) {
event.preventDefault();
var searchString = $('#search').val(); // get the search string
var replacement = '<span class="highlight">' + searchString + '</span>'; // define replacement text
$.ajax({
url: '@Url.Action("Help", "Home")', // don't hard code you url's
type: 'POST',
cache: false,
data: { searchString: searchString },
success: function (result) {
window.history.replaceState("#intagsname", "Title", url);
$('#intagsname').html(result);
var questions = container.find('h5'); // get all question text
$.each(questions, function() {
var text = $(this).html(); // get the text
text = text.replace(new RegExp(searchString, 'g'), replacement); // replace it
$(this).html(text); // update it
});
}
});
});
Then create a style to highlight the search text, for example
.highlight {
font-weight: bold;
color: red;
}
Alternatively, your could use a regex to modify the text to include the html tags in the controller, and then use @Html.Raw() in the view to display it.