主页 / 问题 / 891000
Accepted
Дмитрий
Asked:2020-10-09 23:06:12 +0000 UTC2020-10-09 23:06:12 +0000 UTC

带有上下文搜索的下拉列表

  • 772

是的，下面的代码：

 <input type="text" class="form-control" autocomplete="off" list="test" placeholder="Пример" name="test">
    <datalist id="test">
    <?php foreach ($test as $item) { ?>
          <option value="<?= $item['ID'] ?>"><?= $item['TITLE'] ?></option>
    <?php } ?>
    </datalist>

一切正常，但是当一个元素被其名称选择时，它的 id 分别显示在字段中，并且希望看到它的名称，并在将它传递给表单时发送 id。实现这一点的最佳方法是什么，也许还有其他选择？

php

1 个回答

  1. Best Answer

    您可以添加input一个类型hidden并向其写入一个与 from 的值匹配的 id <option>。

    另请注意，您的主要input是type="text"和用户输入的值可能与来自的值不匹配<datalist>，您需要在 PHP 端考虑这一点。

    注意这个例子，它有一个<option>没有结束标签的标签，我建议你在使用时坚持这个标准<datalist >。

    代码示例

    $(function() {
  $('input[name="test"]').on('input', function() {
    var idDataList = $(this).attr('list');
    var option = $('#' + idDataList + ' option[value="' + $(this).val() + '"]');
    var selectedId = option.length ? option.attr('data-id') : null;
    var hidden = $('input[name="testId"]');
    hidden.val(selectedId);
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<input type="text" class="form-control autocomplete" autocomplete="off" list="test" placeholder="Пример" name="test">
<input type="hidden" name="testId" />

<datalist id="test">
  <option data-id="1" value="Title 1">
  <option data-id="2" value="Title 2">
  <option data-id="3" value="Title 3">
  <option data-id="4" value="Title 4">
  <option data-id="5" value="Title 5">
</datalist>

    如果要避免用户输入与下拉列表中的值不匹配的情况，我建议为此使用插件。

    取自此处的代码示例。

    • 1

相关问题