在 django 中使用 ajax 搜索结果答案

【问题标题】：Search results using ajax in django在 django 中使用 ajax 搜索结果
【发布时间】：2017-10-31 00:17:19
【问题描述】：

我正在使用 this 搜索栏从数据库中搜索产品，但是一旦此搜索栏显示我的结果，标题（深蓝色区域）部分也会随着搜索结果一起扩展，例如 this .我希望在显示搜索结果时标题不应该展开，搜索结果应该越过标题。我的搜索框代码是这样的——

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

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

{% 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 %}

【问题讨论】：

样式与ajax和django无关。就像您手动编写 html 一样。如果您帮助设计样式，您必须向我们展示实际生成的 css 和 html。您可能必须将宽度设置为 .form-group，并让搜索输入和列表都继承自父容器的宽度。

标签： html css django

【解决方案1】：

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

【讨论】：

谢谢，当我在 ul 标签中添加它时，它工作得更正确了。

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：