示例：

Question

我有很多服务选项可供选择。我希望用户能够键入这些服务名称的一部分，并使用常规输入选择其中之一。由于数组很大，所以我不想像这样键入每个选项：

<div>
      <label>Type the service name:</label>
      <input type="text" list="services" />
      <datalist id="services">
         <option value="service1">
         <option value="service2">
         <option value="service3">
         <option value="service4">
         ...
         <option value="service123">
      </datalist>
</div>

因此，我正在尝试使用JavaScript帮我实现。我尝试过：

JavaScript

<script>
        // Services List
        var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED",
            "SEGES", "SEEOR",
            "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC",
            "SEABE",
            "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)",
            "SEMAD",
            "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"
        ];

        var option = ""
        for (i = 0; i < listServices.length; i++) {
            option += '<option value="' + listServices[i] + '">';

        }
        $("options").html(option);
</script>

HTML

<div class="form-group">
                    <label for="sel1">Type the acronym of the Service:</label>
                    <input class="select-css" type="text" list="services" />
                    <datalist id="services">
                        <div id="options">
                        </div>
                    </datalist>
</div>

PS：我也尝试过<div id="options">尝试使用<datalist id="services">在$("services").html(option);中使用它

编辑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR",
            "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE",
            "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD",
            "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"
        ];

        var option = "";

        for (let i = 0; i < listServices.length; i++) {
            option += '<option value="' + listServices[i] + '">';
        }

        document.getElementById("options").innerHTML = option;
    </script>
</head>

<body>
        <div class="form-group">
                <label for="sel1">Type the acronym of the Service:</label>
                <input class="select-css" type="text" list="services" />
                <datalist id="services">
                  <div id="options"></div>
                </datalist>
        </div>
</body>

</html>

Answer 1

您需要像JQuery一样正确使用$("#options").html(option); selector by id

示例：

var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR", "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE", "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD", "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"];

var option = "";

for (let i = 0; i < listServices.length; i++)
{
    option += '<option value="' + listServices[i] + '">';
}

$("#options").html(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="sel1">Type the acronym of the Service:</label>
  <input class="select-css" type="text" list="services" />
  <datalist id="services">
    <div id="options"></div>
  </datalist>
</div>

如果要避免使用JQuery，可以使用getElementById()：

var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR", "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE", "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD", "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"];

var option = "";

for (let i = 0; i < listServices.length; i++)
{
    option += '<option value="' + listServices[i] + '">';
}

document.getElementById("options").innerHTML = option;

<div class="form-group">
  <label for="sel1">Type the acronym of the Service:</label>
  <input class="select-css" type="text" list="services" />
  <datalist id="services">
    <div id="options"></div>
  </datalist>
</div>

尝试使用循环将数组中的所有项目放入文本输入数据列表

1 个答案:

示例：