How does JavaScript implement the search box association function?

JavaScript How to implement the search box association function?

In modern web applications, the search box is a very common element. Users can enter keywords in the search box to find related content. In addition to the basic search function, the Lenovo function provides users with a more convenient search experience. When the user enters a keyword in the search box, the system will automatically give some relevant association suggestions. The user only needs to select one of the suggestions to search, thus improving the accuracy and efficiency of the search.

This article will introduce how to use JavaScript to implement the search box association function. We will use a combination of HTML, CSS and JavaScript to implement this function. Below is a specific code example.

First, we need to create a search box and a container for the Lenovo suggestion box in HTML:

<input type="text" id="searchBox" placeholder="请输入关键词">
<div id="suggestionBox"></div>

The above code creates an input element and a div element as a container for the Lenovo suggestion box.

Next, we need to use CSS to set the style of the search box and Lenovo suggestion box:

#searchBox {
  width: 300px;
  height: 30px;
  padding: 5px;
}

#suggestionBox {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

The above code sets the width, height and padding of the search box, and the Lenovo suggestion box background color, border style and maximum height.

Now, we can write JavaScript code to implement the association function. First, we need to get the DOM elements of the search box and Lenovo suggestion box:

const searchBox = document.getElementById('searchBox');
const suggestionBox = document.getElementById('suggestionBox');

Next, we need to listen to the input event of the search box. When the user enters content, we will get the Lenovo suggestion and display it in the Lenovo suggestion In the box:

searchBox.addEventListener('input', function() {
  const keyword = searchBox.value;
  // 根据关键词获取联想建议的数据
  const suggestions = getSuggestions(keyword);
  
  // 清空联想建议框的内容
  suggestionBox.innerHTML = '';
  
  // 将联想建议添加到联想建议框中
  suggestions.forEach(function(suggestion) {
    const suggestionItem = document.createElement('div');
    suggestionItem.textContent = suggestion;
    suggestionItem.addEventListener('click', function() {
      searchBox.value = suggestion;
      suggestionBox.innerHTML = '';
    });
    suggestionBox.appendChild(suggestionItem);
  });
});

In the above code, we added an input event listener to the search box through the addEventListener method. When the user enters content, we get the value of the search box and call the getSuggestions function to get the data suggested by Lenovo. Then, we first clear the content of the Lenovo suggestion box, and then add the Lenovo suggestion to the Lenovo suggestion box in turn.

Finally, we added a click event listener for each association suggestion item. When the user clicks on an association suggestion, we assign the value of the suggestion to the search box and clear the content of the association suggestion box.

So far, we have completed the implementation of the search box association function. Users can now enter keywords in the search box, and the system will automatically give relevant association suggestions. Users can choose one of the suggestions or continue to enter keywords to search.

The above is a detailed code example of using JavaScript to implement the search box association function. Hope this helps!

The above is the detailed content of How does JavaScript implement the search box association function?. For more information, please follow other related articles on the PHP Chinese website!