django 选择选项后隐藏HTMX搜索结果

relj7zay 于 2023-08-08 发布在 Go

关注(0)|答案(1)|浏览(89)

我用HTMX和django表单创建了一个搜索栏，可以正确显示结果。我有一个JavaScript selectOption（）函数，它用所选的任何选项填充搜索栏，但我在选择一个选项后搜索结果不会消失。这可以通过javascipt处理吗？
此外，搜索栏返回随机结果，一旦我键入的东西，然后删除它，留下空白。有什么我可以填写到hx-trigger来解决这个问题？
100d 1xx 1c 1d 1x的字符串
请参阅下面的htmx标签

widget_attrs_nha_autosearch = {
    'class': 'form-control',
    'data-user-entry': 1,
    'disabled': value.get('read_only'),
    'hx-post': reverse('ng_django_pmp:nha-autosearch'),
    'hx-target': '#results',
    'hx-trigger': "keyup changed delay:500ms, search"
}

字符串
请参阅下面的搜索结果html

{% if results %}
    <ul class="list-group col-xs-12">
        {% for part in results %}
            <li class="list-group-item d-flex justify-content-between align-items-center"
                onclick="selectOption('{{ part.manufacturer_part_number }}')">{{ part.manufacturer_part_number }}</li>
        {% endfor %}
    </ul>
{% else %}
    <p>No search results</p>
{% endif %}
<script defer>
function selectOption (partNumber) {
    const input = document.querySelector('#id_nha_override');
    input.value = partNumber;
    }

型

django

来源：https://stackoverflow.com/questions/76824629/hide-htmx-search-results-after-option-is-selected

1条答案

按热度按时间

7cjasjjr1#

对于你的第一个问题，问题是当你选择一个选项时，你并没有告诉结果会消失。这纯粹是在客户端，所以是的，这可以通过JavaScript处理。

function selectOption(partNumber) {
  const input = document.querySelector('#id_nha_override');
  input.value = partNumber;
  const results = document.querySelector('#results');
  results.innerHTML = '';
}

字符串
对于你的第二个问题，问题可能是当搜索栏被清空时，仍然会向Django后端发送一个空的查询字符串请求，并且后端在这种情况下返回一些默认结果。
一种方法是修改Django视图，使其在查询字符串为空时不返回结果。另一种方法是避免在搜索栏为空时首先发送请求。您可以通过向您的hx-trigger属性添加一个guard子句来实现这一点，如下所示

'hx-trigger': "keyup changed delay:500ms guard:$('id_nha_override').value.trim() !== '', search"

型

赞(0）回复(0）举报 2023-08-08

我来回答

django 选择选项后隐藏HTMX搜索结果

1条答案

相关问题

热门标签

最新问答