Mohammed Saquib
Mohammed Saquib

Reputation: 73

How to get the item's details in search bar?

I'm building an e-commerce web app using ASP.NET Core MVC. I've one search bar on my _layout page. I want to display the item's details such as image, title, and price these values are already stored in the database. I've attached one image with this question. I want to make my search bar something like this image:

enter image description here

My search bar code is below:

<div class="olContent f1">
    <form method="get" asp-controller="Home" asp-action="AllProducts">
        <div class="olSearch fr">
            <input type="text" name="search" placeholder="Enter Keyword" class="inputComn form-control"/>
            <div class="searchIcon">
                <button type="submit" class="searchBtn">
                    <img src="~/images/searchIcon.png"/>
                </button>
            </div>
        </div>
    </form>
</div>

Upvotes: 3

Views: 437

Answers (1)

neehu
neehu

Reputation: 132

You can use twitter typeahead jsplugin. With this you have an option to design your own template(i.e how your search should be displayed). Go through custom template in the above link.

https://twitter.github.io/typeahead.js/examples/

Upvotes: 1

Related Questions