Question

Is it possible to highlight the search term in returned search results? For example:

My [HttpPost] Action:

    public ActionResult ProductSearchForm(Product product)
    {
        return RedirectToAction("ProductResult", new { id = product.ITEMID });
    }

    public ActionResult ProductResult(string id)
    {
        var products = client.ProductSearch(id);
        return PartialView("_ProductResult", products);
    }

client.ProductSearch method (This is a web service, but that’s irrelevant):

    public List<string> ProductSearch(string id)
    {
        List<string> products = context.Products.
            Where(x => x.ITEMID.StartsWith(id)).Select(x=>x.ITEMID).ToList();

        return products;
    }

_ProductResult Partial View:

@foreach (var item in Model)
{
   <p>@item.ITEMID</p>
}

As I use a StartsWith I’d like to highlight the search term in the search results. For example if I search for ‘123’ and this returns 2 results. I’d like it to return something like so:

**123**456

**123**45678

Or wrap the search term with a span that has a class, like so:

<span class="highlighted">123</span>456

<span class="highlighted">123</span>45678

Then this class would have a CSS rule set where it sets the color to yellow for example.

Is this possible?

Answer 1

You can pass “ID” to Partial view, then replace it

public ActionResult ProductResult(string id)
{
    var products = client.ProductSearch(id);
    ViewData["ID"] = id;
    return PartialView("_ProductResult", products);
}

In _ProductResult Partial View,

@foreach (var item in Model)
{
    <p>@Html.Raw(@item.ITEMID.Replace((string)ViewData["ID"], "<span class='highlighted'>" + (string)ViewData["ID"] + "</span>")) </p>
}