在django中使用ajax搜索结果

Question

我正在使用此搜索栏从数据库中搜索产品，但只要此搜索栏显示结果，标题（深蓝色区域）部分也会与搜索结果一起展开，就像这样{ {3}}。我想在显示搜索结果时标题不应该展开，搜索结果应该超过标题。我的搜索框代码就像这样 -

＆＃13;

＆＃13;

<div class="search_box">
    {% csrf_token %}
    <form>
        <div class="form-group">
            <input type="text" id="search" name="search" class="form-control" placeholder="Search">
            <ul id="search-results" class="list-group">
            </ul>
        </div>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

我正在使用带有ajax的django，所以我正在显示我的搜索结果 -

＆＃13;

＆＃13;

{% if p1.count > 0 %}
    {% for p in p1 %}
        <li class="list-group-item"><a href="/products/product_info/{{p.id}}/">{{p.productname}}</a></li>
    {% endfor %}
{% else %}
<li>None to show!</li>
{% endif %}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信您应该将样式position:absolute应用于li元素。

Answer 2

这种情况正在发生，因为列表项<li>已添加到标题区域。解决方案是使用typeahead.js或JQuery Autocomplete。

Answer 3

尝试将“navbar-form”类添加到表单标记中。然后，将“form-group”类替换为“input-group”。

<div class="search_box">
    {% csrf_token %}
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" id="search" name="search" class="form-control" placeholder="Search">
            <ul id="search-results" class="list-group">
            </ul>
        </div>
    </form>
</div>