使用AJAX突出顯示ASP.NET MVC返回結果中的搜索詞

Question

我需要在返回的搜索結果中突出顯示搜索詞嗎？ 我搜索了很多，閱讀大量的文章，但所有的人都從我的結構

這裏有很大的區別是我的控制器

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); 
} 

這裏是我的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); 
     } 
    }); 
}); 

這裏_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> 
} 

我該如何突出顯示關鍵字返回搜索結果中的期限？

這裏是我的主視圖HTML

<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> 

Answer 1

你可以使用JavaScript來包裝搜索文本的所有實例中的元素與類名

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 
      }); 
     } 
    }); 
}); 

然後創建一個風格突出顯示搜索文本，例如

.highlight { 
    font-weight: bold; 
    color: red; 
} 

或者，您可以使用正則表達式來修改在文本中將html標籤包含在控制器中，然後在視圖中使用@Html.Raw()來顯示它。