jquery implements automatic prompt function

In modern web applications, the auto-prompt function is one of the most basic functions. Auto-prompt allows users to conveniently get smart prompts when typing content in the input box and speed up the input speed, which can greatly shorten the time users wait for loading results.

So, how to use jQuery to implement the automatic prompt function? The specific implementation process is introduced below.

1. Preparation work
Before starting the implementation, you first need to prepare the jQuery library and related CSS files. You can choose to download the library file from the official website and introduce it into the HTML file, or you can use a CDN to accelerate the loading speed of the library file.

In terms of CSS files, you can use the styles provided by Bootstrap to beautify the appearance of the prompt box. However, this step is not required. If you don't need to beautify the style, you don't need to import the style file.

2. Obtain data
Automatic prompts need to provide a data source, that is, when the user inputs content, prompt information related to the input content is obtained from the data source and displayed in front of the user. This data source can be a JSON file, a database table or an API interface.

In this example, we use a simple JSON file as the data source. This file contains the names of some cities that we will provide smart hints for as the user types.

In terms of file introduction, you can use the AJAX method to obtain JSON data from the server. For convenience, here we introduce it directly in the HTML file.

3. Write code
Next, we can start writing code.

1. HTML structure

In the HTML structure, we need an input box and a prompt box to display the smart prompt content. The specific structure is as follows:

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. jQuery code

First, you need to obtain the text box and prompt box elements after the document is loaded, and bind a keyup event in the text box , this event is triggered when the user inputs.

Next, for each input, we must obtain the prompt information related to the input content from the data source and display it in the prompt box.

The specific code is as follows:

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

Among them, data represents a global variable used to store information obtained from the data source. Here we simply define it as an array containing city names. The specific content is as follows:

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. CSS style

In addition to JavaScript code, Some CSS styles are needed to beautify the prompt box. Here, we use the style provided by Bootstrap, the code is as follows:

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

IV. Summary

Through the above code, we have implemented a simple automatic prompt function that can provide users with intelligent prompts And speed up the input speed. Of course, in actual applications, more optimization work can be performed, such as using caching to speed up access to data sources, using asynchronous loading to avoid blocking pages, and so on.

The above is the detailed content of jquery implements automatic prompt function. For more information, please follow other related articles on the PHP Chinese website!