jquery - 如何使自动完成搜索结果与页面内容重叠

Question

这是我的自动完成代码:

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

@using (Html.BeginForm())
{
     <div class="itemtodisplay">
    <p>
        @Html.TextBox("SearchString", null, new { id = "SearchString" }) 

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

自动完成列表使页面内容下推..我想让它像一个翻转购物车搜索列表。就像自动完成搜索结果与每个页面的内容重叠一样。请提供任何建议。

Answer 1

如果我是对的，你想要这个不是吗。在 .autocomplete ")"的代码末尾附加以下代码，例如

).data("ui-autocomplete")._renderItem = function (ul, item) {

.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;">' +
                Add what ever you want to show
             '</div></a>';

     }

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

 };

希望这能为您提供指导。