How to implement the automatic completion selection function of a form in JavaScript?

JavaScript How to implement the automatic completion selection function of the form?

In front-end development, the form auto-complete selection function is a very common requirement. Through this function, users can easily select the corresponding options from a predefined list to fill in without manual input. In this article, we will introduce how to use JavaScript to implement the auto-complete selection function of the form, and provide specific code examples.

To implement the automatic completion selection function of the form, we can use the input event of the text input box to monitor user input, and use JavaScript to filter and display matching items based on the user's input. options.

First, we need to add a text input box and a drop-down list to display options in the HTML. A text input box is used for user input, and a drop-down list is used to display matching options. The sample code is as follows:

<input type="text" id="input" />
<select id="select"></select>

Next, we use JavaScript to implement the automatic completion selection function. We first need to define an array containing all options, then process user input in the input event of the text input box, and filter and display matching options based on the input content.

The sample code is as follows:

const options = ["Apple", "Banana", "Cherry", "Durian", "Grape", "Lemon", "Mango", "Orange", "Peach", "Pear"];

const input = document.getElementById("input");
const select = document.getElementById("select");

input.addEventListener("input", function() {
  const inputValue = input.value.toLowerCase(); // 获取用户输入的值并转换为小写字母

  // 清空下拉列表中的选项
  select.innerHTML = "";

  // 根据用户输入的值来筛选匹配的选项
  const filteredOptions = options.filter(function(option) {
    return option.toLowerCase().includes(inputValue);
  });

  // 将筛选出的选项添加到下拉列表中
  filteredOptions.forEach(function(option) {
    const optionElement = document.createElement("option");
    optionElement.value = option;
    select.appendChild(optionElement);
  });
});

Through the above code, we define an array containing all options options, and input## in the text input box #Listen to user input in the event. In the event handler, first get the value entered by the user and convert it to lowercase letters, and then use the filter method to filter the option array and select all options that contain the value entered by the user. Finally, add the filtered options to the drop-down list one by one.

After writing the above code, we can run the page in the browser to see the effect. When the user enters content in the text input box, the drop-down list will automatically complete the selection in real time based on the input content.

Summary:

By using JavaScript, we can easily implement the auto-complete selection function of the form. By listening to the
input event of the text input box and filtering and displaying the predefined options based on the user's input, we can provide a convenient user interface to help users quickly select options. The above code example gives an implementation method that you can adjust and extend according to actual needs.

The above is the detailed content of How to implement the automatic completion selection function of a form in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!