Как отобразить содержимое окна поиска в раскрывающемся списке, например, результаты поиска facebook / amazon

Question

Как отобразить содержимое окна поиска в раскрывающемся списке, например, результаты поиска facebook / amazon

0

Я хочу отобразить результаты поиска, такие как 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>  
}

Выбор элемента:

user3172140 28 апр. 2014, в 12:00

Источник

0

Пожалуйста, ведите меня
user3172140 28 апр. 2014, в 09:22
0

Вам нужен какой-то плагин js - например , автозаполнение jQueryUI, которое вы затем можете привязать к обработчику для заполнения списка при вводе
Pete 28 апр. 2014, в 09:43
0

@ Пит .. спасибо, я понял :)
user3172140 28 апр. 2014, в 09:50

Показать ещё 1 комментарий

Теги:

jquery

asp.net-mvc

facebook

asp.net-mvc-4

asp.net-mvc-areas

1 ответ

Ещё вопросы

Вам нужен какой-то плагин js - например , автозаполнение jQueryUI, которое вы затем можете привязать к обработчику для заполнения списка при вводе

PEO · Answer 1 · 2014-04-28T08-30-00.000Z

это одна из функций, которые я разработал

попробуй это. это работает для меня

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

 };
}