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

Question

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>

To select an element by id, you must add a hash before. For example:$("#services").html(option); — frobinsonj
– frobinsonj, Commented Jun 4, 2019 at 15:56
Oh, that's true, I forgot about that. But I just corrected that and nothing has changed. — Lucas_Guerra
– Lucas_Guerra, Commented Jun 4, 2019 at 16:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 4, 2019 at 16:01

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lucas_Guerra Over a year ago

Just tried it, the problem persists. I edited my code here on my question.

Shidersz Over a year ago

Have you tried the "Run code snippet" button? It is working as expected if you try it. In your last update you are using $("#opcoes").html(opcao); but there is not element with id equal to opcoes on the html markup.

Shidersz Over a year ago

Yes, there is an input, and when you start putting characters on it, the list with matching services acronyms appears. Don't you wanted that?

Lucas_Guerra Over a year ago

Yeah, I copied it wrong, I'm sorry. I'll correct it and test it again. Its because on my real project I'm coding all IDs and variables in Portuguese, and I copied the code from there.

Lucas_Guerra Over a year ago

Using "Run code snippet" it works well. But when I create an HTML file to test it dosen't work. I believe the problem is other, maybe I'm doing something wrong somewhere else.

|

Collectives™ on Stack Overflow

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

1 Answer 1

Example:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related