Introduction aux exemples de saisie semi-automatique jQuery

Cet article présente principalement une introduction à jQuery Autocomplete. jQuery UI Autocomplete est le composant de saisie semi-automatique de jQuery UI. Il s'agit de l'Autocomplete le plus puissant et le plus flexible que j'ai jamais utilisé. Il prend en charge les tableaux Array/JSON locaux et les requêtes Array via ajax. Tableau /JSON, JSONP et Function (le plus flexible) pour obtenir des données.

jQuery UI Autocomplete est le composant de saisie semi-automatique de jQuery UI. Il s'agit de la saisie semi-automatique la plus puissante et la plus flexible que j'ai jamais utilisée. Il prend en charge les tableaux Array/JSON locaux, les tableaux Array/JSON demandés via ajax et JSONP, et. Fonction (la plus flexible) pour obtenir des données.

Sources de données prises en charge

jQuery UI Autocomplete prend principalement en charge deux formats de données : String Array et JSON.

Il n'y a rien de spécial dans le format Array ordinaire, comme suit :

["bjpowernode","动力节点","李四"]

Pour Array au format JSON, il faut avoir : les attributs label et value , comme suit :

[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]

L'attribut label est utilisé pour s'afficher dans le menu contextuel de saisie semi-automatique, et l'attribut value est la valeur attribuée à la zone de texte après sélection.

Si l'un des attributs n'est pas spécifié, il sera remplacé par l'autre attribut (c'est-à-dire que la valeur et l'étiquette ont la même valeur), comme suit :

[{label: "bjpowernode"}, {label: "李四"}]
[{value: "bjpowernode"}, {value: "李四"}]

Si ni l'étiquette ni la valeur ne sont spécifiées. Si spécifié, il ne peut pas être utilisé pour les invites de saisie semi-automatique.

Notez également que la clé de sortie JSON du serveur doit être entre guillemets doubles, comme suit :

[{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]

Sinon, une erreur d'analyse syntaxique peut se produire.

Paramètres principaux

Les paramètres couramment utilisés de jQuery UI Autocomplete sont :

1.Source : utilisé pour spécifier la source de données, le type est String, Array, Function

1. String : adresse côté serveur pour la requête ajax, renvoie le format Array/JSON

2. Array : String Tableau ou tableau JSON

3. Fonction (requête, réponse) : obtenez la valeur d'entrée via request.term, réponse([Array]) pour présenter les données (JSONP est de cette façon)

2.minLength : lorsque la longueur de la chaîne dans la zone de saisie atteint minLength, activez la saisie semi-automatique

3.autoFocus : lorsque le menu de sélection de saisie semi-automatique apparaît , sélectionnez-le automatiquement Le premier

4.delay : combien de millisecondes pour retarder l'activation de la saisie semi-automatique

Les autres moins couramment utilisés ne sont pas répertoriés.

Comment utiliser

Supposons qu'il y ait la zone de saisie suivante sur la page :

<input type="text" id="autocomp" />

Requête AJAX
Par spécifiant la source comme serveur Il est implémenté par l'adresse du client, comme suit :

$("#autocomp").autocomplete({
  source: "remote.ashx",
  minLength: 2
});

puis le reçoit côté serveur et affiche les résultats correspondants. Notez que la valeur par défaut est passée. le nom du paramètre est le terme :

public void ProcessRequest(HttpContext context) {   
// 查询的参数名称默认为term   
string query = context.Request.QueryString["term"];   
context.Response.ContentType = "text/javascript";   
//输出字符串数组 或者 JSON 数组   
context.Response.Write("[{\"label\":\"动力节点\",\"value\":\"bjpowernode\"},{\"label\":\"李四\",\"value\":\"李四\"}]"); }

Tableau local/tableau JSON

// 本地字符串数组
var availableTags = [
  "C#",
  "C++",
  "Java",
  "JavaScript",
  "ASP",
  "ASP.NET",
  "JSP",
  "PHP",
  "Python",
  "Ruby"
];
$("#local1").autocomplete({
  source: availableTags
});
// 本地json数组
var availableTagsJSON = [
  { label: "C# Language", value: "C#" },
  { label: "C++ Language", value: "C++" },
  { label: "Java Language", value: "Java" },
  { label: "JavaScript Language", value: "JavaScript" },
  { label: "ASP.NET", value: "ASP.NET" },
  { label: "JSP", value: "JSP" },
  { label: "PHP", value: "PHP" },
  { label: "Python", value: "Python" },
  { label: "Ruby", value: "Ruby" }
];
$("#local2").autocomplete({
  source: availableTagsJSON
});

Méthode de fonction de rappel

Acquérir des données personnalisées en spécifiant la source en tant que fonction personnalisée. Il existe deux fonctions principales Paramètres (demande, réponse), utilisées respectivement pour obtenir les valeurs d'entrée et présenter les résultats

Obtenir des données en mode Tableau local (imitant la connexion Sina Weibo )

var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "bjpowernode.com", "火星.com", "李四.com"];
$("#email1").autocomplete({
  autoFocus: true,
  source: function(request, response) {
    var term = request.term, //request.term为输入的字符串
      ix = term.indexOf("@"),
      name = term, // 用户名
      host = "", // 域名
      result = []; // 结果
 
    result.push(term);
    // result.push({ label: term, value: term }); // json格式
    if (ix > -1) {
      name = term.slice(0, ix);
      host = term.slice(ix + 1);
    }
    if (name) {
      var findedHosts = (host ? $.grep(hosts, function(value) {
        return value.indexOf(host) > -1;
      }) : hosts),
      findedResults = $.map(findedHosts, function(value) {
        return name + "@" + value; //返回字符串格式
        // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
      });
      result = result.concat($.makeArray(findedResults));
    }
    response(result);//呈现结果
  }
});

Obtenez des données via JSONP

Obtenez-les directement depuis la DEMO officielle, envoyez une requête ajax au serveur distant, puis traitez le résultat renvoyé, et présentez-le enfin par la réponse :

$("#jsonp").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "http://ws.geonames.org/searchJSON",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
      },
      success: function(data) {
        response($.map(data.geonames, function(item) {
          return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name
          }
        }));
      }
    });
  },
  minLength: 2
});

Événements principaux

jQuery UI Autocomplete contient des événements qui peuvent être utilisés pour un contrôle supplémentaire à certaines étapes :

1.create(event, ui ) : Lorsque la saisie semi-automatique est créée, vous pouvez avoir un certain contrôle sur l'apparence de cet événement

2.search(event, ui) : Avant de commencer la demande, vous pouvez renvoyer false dans cet événement pour annuler la demande

3.open(event, ui) : lorsque la liste des résultats de saisie semi-automatique apparaît

4. focus(event, ui) : tout élément de la liste des résultats de saisie semi-automatique est obtenu Lorsque le focus est activé, ui.item est l'élément ciblé

5.select(event, ui) : lorsqu'un élément dans la liste des résultats de saisie semi-automatique est sélectionné, ui.item est l'élément sélectionné

6.close(event, ui) : Lorsque la liste des résultats de saisie semi-automatique est fermée

7 .change(event, ui) : lorsque la valeur change, ui.item est l'élément sélectionné

Les attributs d'élément (le cas échéant) des paramètres ui de ces événements ont des attributs d'étiquette et de valeur par défaut , que l'ensemble de données dans la source soit un tableau ou un tableau JSON, comme suit :

["bjpowernode","动力节点","李四"]
[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]
[{label: "动力节点", value: "bjpowernode", id: "1"}, {label: "李四", value: "李四", id: "2"}]

S'il s'agit du troisième type, vous pouvez également obtenir la valeur de ui.item .identifiant.

Ces événements peuvent être liés de 2 manières, comme suit :

// 在参数中
$("#autocomp").autocomplete({
  source: availableTags
  , select: function(e, ui) {
   alert(ui.item.value) 
  }
});
 
// 通过bind来绑定
$("#autocomp").bind("autocompleteselect", function(e, ui) {
  alert(ui.item.value);
});

Le nom de l'événement utilisé pour lier via la liaison est "autocomplete" + Nom de l'événement, tel car "select" est "autocompleteselect".

Saisie semi-automatique pour plusieurs valeurs

Dans des circonstances normales, la saisie semi-automatique de la zone de saisie ne nécessite qu'une seule valeur (telle que : javascript si plusieurs valeurs​​) ; sont nécessaires (tels que : javascript, c#, asp.net), vous devez lier certains événements pour un traitement supplémentaire :

1 Renvoyer false dans l'événement focus pour empêcher la valeur de la zone de saisie. d'être remplacé par une seule valeur de saisie semi-automatique

2 Combinez plusieurs valeurs dans l'événement select

3. Effectuez un traitement dans l'événement keydown de l'élément. , la raison est la même que 1

4. Utilisez la source de la fonction de rappel pour obtenir la dernière valeur d'entrée et présenter le résultat

Ou prenez simplement le code DEMO officiel directement. :

// 按逗号分隔多个值
function split(val) {
  return val.split(/,\s*/);
}
// 提取输入的最后一个值
function extractLast(term) {
  return split(term).pop();
}
// 按Tab键时，取消为输入框设置value
function keyDown(event) {
  if (event.keyCode === $.ui.keyCode.TAB &&
      $(this).data("autocomplete").menu.active) {
    event.preventDefault();
  }
}
var options = {
  // 获得焦点
  focus: function() {
    // prevent value inserted on focus
    return false;
  },
  // 从autocomplete弹出菜单选择一个值时，加到输入框最后，并以逗号分隔
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
  }
};
// 多个值，本地数组
$("#local3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      // delegate back to autocomplete, but extract the last term
      response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term)));
    }
  }));
// 多个值，ajax返回json
$("#ajax3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      $.getJSON("remoteJSON.ashx", {
        term: extractLast(request.term)
      }, response);
    }
  }));

Connexe recommandé :

Comment utiliser la saisie semi-automatique dans les composants de l'interface utilisateur Ionic3

10 exemples de saisie semi-automatique recommandés, couramment utilisés, bienvenue à télécharger !

Résumé d'utilisation de la saisie semi-automatique

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!