Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions avancées de saisie semi-automatique de formulaires

Comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée de saisie semi-automatique des formulaires, des exemples de code spécifiques sont requis

Dans la plupart des sites Web, les formulaires sont l'un des éléments importants permettant aux utilisateurs d'interagir avec le site Web. Cependant, cela peut devenir fastidieux lorsque les utilisateurs doivent fréquemment saisir des données identiques ou similaires dans un formulaire. Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser HTML, CSS et jQuery pour implémenter des fonctionnalités avancées de saisie semi-automatique des formulaires, permettant aux utilisateurs de remplir les formulaires plus rapidement et de réduire le risque d'erreurs de saisie.

Dans cet article, nous présenterons comment créer un formulaire avec saisie semi-automatique en utilisant HTML, CSS et jQuery. Nous utiliserons un exemple de scénario, en supposant que nous créons un formulaire d'inscription avec un champ à remplir pour la ville de l'utilisateur. Nous utiliserons Ajax et JSON pour obtenir la source de données de la ville, puis utiliserons jQuery pour implémenter la fonction d'auto-complétion.

Tout d’abord, créons la structure HTML. Nous avons besoin d'une zone de saisie et d'une liste déroulante pour afficher les options de saisie semi-automatique. Le code HTML est le suivant :

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

Ensuite, nous devons ajouter des styles à la zone de saisie et à la liste déroulante. Nous pouvons y parvenir en utilisant CSS. Seuls les styles les plus basiques sont répertoriés ici, vous pouvez les ajuster en fonction de vos besoins :

#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;
}

Ensuite, nous devons obtenir la source de données de la ville. Nous supposons ici que les données de la ville sont stockées dans un fichier au format JSON nommé villes.json. L'exemple de structure de données est le suivant :

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

Dans jQuery, il est très simple d'utiliser Ajax pour obtenir des données JSON. Nous pouvons utiliser la méthode $.getJSON de jQuery pour y parvenir. L'exemple de code est le suivant :

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

Ensuite, nous devons écrire du code pour implémenter la fonction d'auto-complétion. Lorsque l'utilisateur commence à taper dans la zone de saisie, nous devons déclencher un événement pour afficher les options de saisie semi-automatique correspondantes. Nous pouvons utiliser l'événement keyup de jQuery pour surveiller les entrées de l'utilisateur. L'exemple de code est le suivant :

$("#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();
  }
});

Dans le code ci-dessus, nous utilisons l'événement keyup pour surveiller les changements de valeur de la zone de saisie. Si la valeur de la zone de saisie n'est pas vide, nous envoyons une requête Ajax et parcourons les données de la ville pour trouver la ville qui répond aux critères de recherche. Nous affichons ensuite ces villes dans une liste déroulante. Nous devons également écrire deux fonctions auxiliaires, showMatchingCities et hideCityList. Les fonctions de ces deux fonctions sont respectivement d'afficher les options de ville correspondantes et de masquer la liste déroulante.

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(); // 隐藏下拉列表
}

Enfin, nous devons également ajouter une fonction de gestionnaire pour l'événement click de l'option de saisie semi-automatique afin que la ville sélectionnée soit renseignée dans la zone de saisie. L'exemple de code est le suivant :

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

Dans le code ci-dessus, nous utilisons la méthode on de jQuery pour gérer la délégation d'événements. Lorsque l'utilisateur clique sur une option dans la liste déroulante, nous obtenons le nom de la ville sélectionnée et le remplissons dans la zone de saisie. Ensuite, nous masquons la liste déroulante.

Grâce aux exemples de code ci-dessus, nous pouvons voir comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée de saisie semi-automatique des formulaires. Ces codes peuvent être ajustés et étendus selon les besoins pour répondre à différents scénarios et besoins commerciaux. En réduisant les efforts de saisie et les erreurs de l'utilisateur, la fonction de saisie semi-automatique des formulaires améliorera considérablement l'expérience utilisateur. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!