¿Necesito resaltar el término de búsqueda en los resultados de búsqueda devueltos? Busqué mucho y leí muchos artículos, pero todos son muy diferentes de mi estructura.
Aquí está mi controlador
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); }y aqui esta mi 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); } }); });Aquí está _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> }¿Cómo resalto el término de búsqueda en los resultados de búsqueda devueltos?
Aquí está mi html para la vista principal
<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>Puede usar javascript para envolver cualquier instancia del texto de búsqueda en un elemento con un nombre de clase
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 }); } }); });Luego cree un estilo para resaltar el texto de búsqueda, por ejemplo
.highlight { font-weight: bold; color: red; } Alternativamente, podría usar una expresión regular para modificar el texto para incluir las etiquetas html en el controlador y luego usar @Html.Raw() en la vista para mostrarlo.