У меня огромный массив с множеством вариантов услуг.Я хочу, чтобы пользователь мог набирать части названий этих сервисов и выбирать один из них, используя обычный ввод.Поскольку массив большой, я не хочу вводить каждую опцию следующим образом:
<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>