如何在搜索栏中获取项目的详细信息?

Posted

技术标签:

【中文标题】如何在搜索栏中获取项目的详细信息?【英文标题】:How to get the item's details in search bar? 【发布时间】:2021-09-09 21:36:40 【问题描述】:

我正在使用 ASP.NET Core MVC 构建电子商务 Web 应用程序。我的 _layout 页面上有一个搜索栏。我想显示商品的详细信息,例如图像、标题和价格,这些值已经存储在数据库中。我附上了一张带有这个问题的图片。我想让我的搜索栏变成这样的图片:

我的搜索条形码如下:

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

【问题讨论】:

您需要在 javascript 中实现它。像jqueryui.com/autocomplete/#custom-data 这样的东西。搜索js autocomplete image 【参考方案1】:

您可以使用 twitter typeahead jsplugin。有了这个,您可以选择设计自己的模板(即您的搜索应该如何显示)。 浏览上述链接中的自定义模板。

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

【讨论】:

以上是关于如何在搜索栏中获取项目的详细信息?的主要内容,如果未能解决你的问题,请参考以下文章

在 ItemClick() 事件上获取 ListView 项目的详细信息

如何通过在目标 c 中搜索应用程序名称来获取给定的应用程序名称和详细信息?

如何在 sitecore 中获取媒体项目详细信息?

在 Flutter 中搜索后如何导航到详细信息页面

如何从 social_django 获取用户详细信息?并打印所有用户的所有详细信息

如何从交易网络套件 freemarker 高级 pdf/html 中获取项目详细信息