How to Display search box content under a drop list like facebook/amazon search result

Question

i want to display my search result like Facebook or any e-commerce search result.

My View Page:

Jquery Code:

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

                    });
                });

            </script>

Code for Searching

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

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

Displaying result :

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

Selecting item:

Answer 1

this is one function that i have developed

try this. this is working for me

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

 };
}