CODEWITHSUNDEEP
javascripthtmlloopshtml-inputhtml-datalist
Lucas_Guerra
Lucas_Guerra

Reputation: 51

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

I have a huge array with many services options. I want that the user could be able the type parts of those services' names and choose one of them using a normal input. Since the array is big I don't want to type each option like this:

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

So I'm trying to use JavaScript to do it for me. I tried this:

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: I also tried without the <div id="options"> trying to aply it in <datalist id="services"> using $("services").html(option);

EDIT 

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

Upvotes: 0

Views: 1576

Answers (1)

Shidersz
Shidersz

Reputation: 17190

You need to correctly use the JQuery selector by id like $("#options").html(option);

Example:

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>

If you want to avoid JQuery, you can use 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>

Upvotes: 1

Related Questions