Implémentation de la saisie semi-automatique pour remplir automatiquement les formulaires en fonction des compétences du plug-in_javascript bootstrap

Basé sur le plug-in bootstrap, la saisie semi-automatique complète automatiquement le formulaire, en fournissant le code de script, les cas d'utilisation et le serveur backend (php). J'espère que cela pourra aider tout le monde. .

Tout d'abord, vous devez charger bootstrap&jquery. Ce qui nécessite une explication supplémentaire, c'est que le tableau bidimensionnel renvoyé par le backend doit être cohérent avec l'appel sous la méthode formatItem ;
De plus, les données renvoyées doivent d'abord être analysées JSON !

Description des paramètres associés :

source : fonction (requête, processus){}. query représente la chaîne dans la zone de saisie de texte actuelle. Dans cette méthode, vous pouvez demander des données (objet json sous la forme d'un tableau) à l'arrière-plan via ajax, puis utiliser l'objet renvoyé comme paramètre du processus
formatItem : fonction(élément){}. Convertissez un objet json spécifique des données renvoyées dans un format de chaîne à afficher dans la liste d'invites. Valeur de retour : string
setValue : fonction (élément){}. Lorsqu'un élément de la liste d'invites est sélectionné, définissez la valeur affichée dans la zone de saisie de texte et la valeur réelle à obtenir. Format de la valeur de retour : {'data-value':item["L'attribut d'élément de la valeur affichée dans la zone de saisie"],'real-value':item["L'attribut d'élément de la valeur réelle qui doit être obtenue" ]}, qui peut être utilisé ultérieurement via la zone de saisie de texte. L'attribut de valeur réelle obtient la valeur .
éléments : Le nombre maximum d'ensembles de résultats pour les invites de saisie semi-automatique, par défaut : 8 ;
minLength : La correspondance ne sera effectuée que lorsque la chaîne dans la zone de saisie de texte actuelle atteint cette valeur d'attribut. Par défaut : .
délai : Spécifiez le nombre de millisecondes avant de demander réellement des données à l'arrière-plan pour éviter les requêtes fréquentes en arrière-plan causées par une saisie trop rapide. Par défaut : 500.

Implémentez la saisie semi-automatique pour compléter automatiquement le formulaire basé sur le plug-in bootstrap, le code est le suivant

1.Code

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   return process(respData);
  });
 },
 formatItem:function(item){
  return item["iccid"]+"("+item["mobile"]+")";
 },
 setValue:function(item){
  return {'data-value':item["iccid"],'real-value':item["mobile"]};
 }
});
</script>

2. $data est un tableau à deux dimensions

echo json_encode( $data )
3. Format json standard qui doit être renvoyé

[code][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}][code]

Contrôle de saisie semi-automatique Bootstrap Autocomplete est basé sur la propre saisie anticipée de contrôle de bootstrap, car la saisie semi-automatique ne prend pas en charge les objets complexes.

//示例代码如下：
 
$('#autocompleteInput').autocomplete({
  source:function(query,process){
   var matchCount = this.options.items;//返回结果集最大数量
   $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){
    return process(respData);
   });
  },
  formatItem:function(item){
   return item["regionName"]+"("+item["regionNameEn"]+"，"+item["regionShortnameEn"]+") - "+item["regionCode"];
  },
  setValue:function(item){
   return {'data-value':item["regionName"],'real-value':item["regionCode"]};
  }
 });
 
$("#goBtn").click(function(){ //获取文本框的实际值
  var regionCode = $("#autocompleteInput").attr("real-value") || "";
  alert(regionCode);
 });

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.