Введите текстовое поле через автозаполнение jQuery?

Question

<input type="text" placeholder=" " name="firstName" id="firstName" required="" class="gl-input__field gl-input__field--empty gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-firstName" value="">

Как бы я автоматически заполнил это значение с помощью автозаполнения? Я пробовал гуглить, но я честно запутался, и я разработчик полного стека, но я не занимаюсь веб-разработкой, если мне это абсолютно не нужно.

Я так много понял;

$('#firstName').autocomplete("Bob")

но вместо "Боб" это должен быть метод, и я не знаю, что поставить?

Могу ли я сделать автозаполнение для каждого идентификатора в отдельности или я должен сделать все сразу?

Так как «автозаполнение» само по себе является действительным идентификатором, как бы я это сделал?

Спасибо.

PS Я также делаю инъекцию "//code.jquery.com/ui/1.10 .2 / jquery -ui. js "на страницу, если это имеет значение.

Я пытался

$("#firstName").autocomplete({value: "Bob"}).trigger("change");

, но текст не отображается в текстовом поле!

Answer 1

Вы можете вызвать метод следующим образом

$( "#firstName" ).autocomplete({source: firstNameList()});   

$( function() {
    $( "#firstName" ).autocomplete({source: [firstNameList()]});    
    $( "#lastName" ).autocomplete({source: [lastNameList()]});

 });
  
 function firstNameList() {
    return "firstnames";
}
function lastNameList() {
    return "lastname";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input type="text" placeholder=" " name="firstName" id="firstName" required="" class="gl-input__field gl-input__field--empty gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-firstName" value="">
  <input type="text" placeholder=" " name="lastName" id="lastName" required="" class="gl-input__field gl-input__field--empty gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-lastName" value="">
</div>