How to implement the automatic completion input box function in JavaScript?

How to implement the automatic completion input box function in JavaScript?

In web development, the auto-complete input box is a very common function. It can provide a fast, convenient and accurate input method and improve the user experience. This article will introduce how to use JavaScript to implement the auto-complete input box function and provide specific code examples.

1. HTML structure

First, we need to prepare an HTML structure containing an input box. An example is as follows:

<input type="text" id="autocomplete-input" placeholder="请输入关键字">
<ul id="autocomplete-list"></ul>

In the above example, we use the <input> element as the input box, set an id to "autocomplete-input", and add a placeholder attribute. In addition, we use a <ul></ul> element as the auto-complete prompt list and set an id as "autocomplete-list".

2. JavaScript implementation

Next, we need to write JavaScript code to implement the automatic completion function. First, we need to listen to the input event of the input box and get the keywords entered by the user. We can then obtain the data related to the entered keyword through an Ajax request and display it in the auto-complete prompt list.

The following is a simple implementation example:

// 获取输入框和提示列表
var input = document.getElementById('autocomplete-input');
var list = document.getElementById('autocomplete-list');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  var keyword = input.value;
  
  // 发送请求获取与关键字相关的数据
  // 这里可以根据实际情况进行后端接口的调用
  
  // 示例中使用一个静态的数据源来模拟请求
  var data = ['apple', 'banana', 'orange', 'grape', 'pineapple'];
  
  // 清空提示列表
  list.innerHTML = '';

  // 遍历数据，在提示列表中插入匹配的项
  for (var i = 0; i < data.length; i++) {
    if (data[i].indexOf(keyword) !== -1) {
      var item = document.createElement('li');
      item.textContent = data[i];
      list.appendChild(item);
    }
  }
});

In the above example, we first obtain the DOM elements of the input box and prompt list, and use the addEventListener method to listen for input The input event of the box. In the event handler function, we obtain the keyword entered by the user through the value attribute.

We can then send an Ajax request to obtain data related to the keyword. In the example, in order to simplify the code, we use a static data source to simulate the request. The specific implementation needs to call the backend interface according to the actual situation.

Next, we insert items matching the keyword into the prompt list by looping through the data array. By creating a <li> element, setting its text content using the textContent attribute, and finally adding it to the prompt list.

3. Style beautification

Finally, we can beautify the auto-complete prompt list to improve the user experience. You can set the style of the prompt list through CSS, for example:

#autocomplete-list {
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

#autocomplete-list li {
  padding: 5px;
  cursor: pointer;
}

#autocomplete-list li:hover {
  background-color: #f1f1f1;
}

In the above example, we set the border style, list style, padding, maximum height and scroll bar of the prompt list.

Through the above steps, we can implement a simple auto-complete input box function. When the user enters a keyword, relevant data is automatically searched and matching items are displayed in the prompt list. Users can select and select an item through the mouse or keyboard to achieve automatic completion.

It should be noted that the above example is just a simple implementation, and the actual situation may require the cooperation of more complex processing logic and back-end interfaces. However, by understanding the above principles and examples, it can help us better implement and customize the auto-complete input box function.

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