Question

我想显示我的搜索结果，如Facebook或任何电子商务搜索结果。

我的观看页面：

Jquery代码：

            <script type="text/javascript">
                jQuery(function ($) {
                    $("SearchString").keyup(function () {
                       $("#SearchString").autocomplete({
                            messages: '',
                            source: '@Url.Action("GetProducts","Search")',
                            minLength: 2
                        });

                    });
                });

            </script>

搜索代码

@using (Html.BeginForm())
{
        @Html.TextBox("SearchString", null, new { id = "SearchString" }) 

        <input type="submit" value="Search" id="Search" />
}

显示结果：

@foreach (var item in Model)
{
    @Html.DisplayFor(modelItem => item.ProductName) 
    <a href="@Url.Action("Details","Store",new {id=item.PkProductID})">here</a>  
}

选择项目：

Answer 1

这是我开发的一个功能

试试这个。这对我有用

function globalquickSearch() {

 var searchQuery = $("#globalQuickSearch").val();

 $("#globalQuickSearch").autocomplete({

     search: function () { $(this).addClass('quickSearchWorking'); },
     open: function () { $(this).removeClass('quickSearchWorking'); },

     source:
          function (request, response) {

             $.get("/Controller/JsonFunction?searchQuery=" + request.term,
              function (data) {
                 response(data);
              });
          },


     select: function (event, ui) {

         var searchQuery = $("#globalQuickSearch").val();

     },

     minLength: 1
 }).data("ui-autocomplete")._renderItem = function (ul, item) {

     var inner_html = 'No results';

     if (item.ListItemType != 'NoResult') {

         inner_html = '<a href="' + item.RoutUrl + '">' +
              '<div style="height:45px; padding: 2px;">' +
                 '<div class="right" style="font-size:x-small;font-weight:bold;">' + item.PropertyValue + '</div>' +
                Add What you want to show to user
                 '</div>' +
             '</div></a>';

     }

     return $("<li></li>")
          .data("ui-autocomplete-item", item)
          .append(inner_html)
          .appendTo(ul);

 };
}

如何在Facebook /亚马逊搜索结果等下拉列表下显示搜索框内容

1 个答案: