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

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"> 的情况下尝试使用 $("services").html(option);

在


 <datalist id="services">

中应用它

编辑

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

你需要像$("#options").html(option);

一样正确使用JQueryselector 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>

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

Trying to put all items from an array using a loop into a text input datalist

javascript

html

loops

html-input

html-datalist

示例：