How to use HTML, CSS and jQuery to implement advanced form auto-completion functions

How to use HTML, CSS and jQuery to implement the advanced function of form auto-completion, specific code examples are required

In most websites, the form is completed between the user and the website One of the important elements of interaction. However, this can become tedious when users frequently need to enter the same or similar data into a form. In order to improve the user experience, we can use HTML, CSS and jQuery to implement advanced features of form auto-completion, allowing users to fill in forms faster and reduce the possibility of input errors.

In this article, we will introduce how to use HTML, CSS and jQuery to create a form with auto-completion function. We'll use an example scenario, assuming we are creating a registration form with a field to fill in the user's city. We will use Ajax and JSON to obtain the city data source, and then use jQuery to implement the auto-completion function.

First, let's create the HTML structure. We need an input box and a dropdown list to display the autocomplete options. The HTML code is as follows:

<input type="text" id="city-input" />
<ul id="city-list"></ul>

Next, we need to add styles to the input boxes and drop-down lists. We can achieve this using CSS. Only the most basic styles are listed here, and you can adjust them according to your needs:

#city-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

#city-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none; /* 初始状态下隐藏下拉列表 */
  border: 1px solid #ccc;
}

Next, we need to obtain the city data source. Here we assume that city data is stored in a file in JSON format named cities.json. The sample data structure is as follows:

[
  {
    "id": 1,
    "name": "北京"
  },
  {
    "id": 2,
    "name": "上海"
  },
  {
    "id": 3,
    "name": "广州"
  }
  // 其他城市数据...
]

In jQuery, it is very simple to use Ajax to get JSON data. We can use jQuery's $.getJSON method to achieve this. The sample code is as follows:

$.getJSON("cities.json", function(data) {
  // 处理获取的城市数据
});

Next, we need to write code to implement the automatic completion function. When the user starts typing in the input box, we need to trigger an event to display matching autocomplete options. We can use jQuery's keyup event to monitor user input. The sample code is as follows:

$("#city-input").keyup(function() {
  var searchQuery = $(this).val(); // 获取输入框的值

  if (searchQuery !== "") {
    // 发送Ajax请求获取匹配的城市数据
    $.getJSON("cities.json", function(data) {
      var matchingCities = [];

      // 遍历城市数据，查找匹配的城市
      $.each(data, function(index, city) {
        var cityName = city.name;

        if (cityName.indexOf(searchQuery) !== -1) {
          matchingCities.push(cityName);
        }
      });

      // 显示匹配的城市选项
      showMatchingCities(matchingCities);
    });
  } else {
    // 如果输入框为空，隐藏下拉列表
    hideCityList();
  }
});

In the above code, we use the keyup event to monitor the value changes of the input box. If the value of the input box is not empty, we send an Ajax request and traverse the city data to find the city that meets the search criteria. We then display these cities in a dropdown list. We also need to write two auxiliary functions, showMatchingCities and hideCityList. The functions of these two functions are to display matching city options and hide the drop-down list respectively.

function showMatchingCities(cities) {
  var $cityList = $("#city-list");
  $cityList.empty(); // 清空下拉列表中的选项

  // 遍历匹配的城市，创建选项并添加到下拉列表中
  $.each(cities, function(index, cityName) {
    var $cityOption = $("<li>" + cityName + "</li>");
    $cityList.append($cityOption);
  });

  $cityList.show(); // 显示下拉列表
}

function hideCityList() {
  var $cityList = $("#city-list");
  $cityList.hide(); // 隐藏下拉列表
}

Finally, we also need to add a handler function for the click event of the auto-complete option so that the selected city can be filled into the input box. The sample code is as follows:

$("#city-list").on("click", "li", function() {
  var cityName = $(this).text();
  $("#city-input").val(cityName);
  hideCityList();
});

In the above code, we use jQuery's on method to handle event delegation. When the user clicks an option in the dropdown, we get the name of the selected city and populate it into the input box. Then we hide the dropdown.

Through the above code examples, we can see how to use HTML, CSS and jQuery to realize the advanced function of form auto-completion. These codes can be adjusted and expanded as needed to meet different scenarios and business needs. By reducing user input effort and errors, form auto-completion will greatly improve the user experience. Hope this article is helpful to you!

The above is the detailed content of How to use HTML, CSS and jQuery to implement advanced form auto-completion functions. For more information, please follow other related articles on the PHP Chinese website!