Sur la base du plug-in Bootstrap, la saisie semi-automatique remplit automatiquement les formulaires, fournit du code de script, des cas d'utilisation et du serveur d'arrière-plan (PHP). Il y a certaines choses qui ne sont pas expliquées clairement dans le texte original, et j'espère que cela pourra aider tout le monde.
Tout d'abord, je dois charger Bootstrap & jQuery. Il convient de noter que le tableau bidimensionnel renvoyé par le backend est cohérent avec l'appel ci-dessous la méthode du formatitem;
De plus, les données renvoyées doivent d'abord être Parsejson! Souviens-toi.
Description du paramètre connexe:
Source: fonction (requête, processus) {}. La requête représente la chaîne dans la zone d'entrée de texte actuelle. Dans cette méthode, les données peuvent être demandées à l'arrière-plan (un objet JSON sous la forme d'un tableau) via AJAX, puis l'objet retourné est utilisé comme paramètre du processus;
Formatitem: fonction (item) {}. L'objet JSON spécifique qui renvoie les données est converti en format de chaîne, qui est utilisé pour l'afficher dans la liste d'invites, et la valeur de retour est: String;
setValue: fonction (item) {}. Lorsqu'un élément de la liste des invites est sélectionné, définissez la valeur affichée dans la zone d'entrée de texte et la valeur qui doit réellement être obtenue. RETOUR VALEUR FORMAT: {'Data-Value': élément ["Propriété d'élément de la valeur affichée dans la zone de saisie"], 'Real-Value': élément ["Propriété d'élément de la valeur réelle qui doit être obtenue"]]}, plus tard, cette valeur peut être obtenue via la propriété de valeur réelle de la zone d'entrée de texte;
Éléments: le nombre maximum de jeux de résultats pour les invites d'achèvement automatique, par défaut: 8;
MinLength: le processus de correspondance ne sera effectué que lorsque la chaîne dans la zone d'entrée de texte actuelle atteint la valeur de la propriété. Par défaut: 1;
Délai: Après avoir spécifié le nombre de millisecondes de retard, des données seront demandées à l'arrière-plan pour empêcher les demandes fréquentes de l'arrière-plan d'être fréquemment causées par une entrée rapide. Par défaut: 500
Sur la base du plug-in Bootstrap, la saisie semi-automatique remplit automatiquement le formulaire, le code est le suivant
1. Code
<Script> $ ('# sim_iccid'). AutoChyPlelet ({source: function (query, process) {var matchCount = this.options.items; // Le nombre maximum de jeux de résultats autorisés est $ .get ("http://www.syiyuan.com/update/", {"iccid": query, "MatchCount": MatchCount}, function (respdata) {respdata = $ .parsejson (respndata); // les données renvoyées sont renvoyées (respdata);}); élément [iccid "] +" ("+ item [" mobile "] +") ";}, setValue: function (item) {return {'data-valeur': item [iccid"], 'real-valeur': item ["mobile"]};2. $ Data est un tableau bidimensionnel
echo json_encode ($ data)
3. Le format JSON standard qui doit être retourné
[code] [{"iccid": "12345678901234567890", "mobile": "1850000"}, {"iccid": "12345785", "mobile": "1850001"}] [code]
Bootstrap Contrôle de la saisie semi-automatique Assommée automatique est transformée en fonction du type de type de contrôle du bootstrap, car Typeahead ne prend pas en charge les objets complexes.
// L'exemple de code est le suivant: $ ('# AutoChyPleletInput'). AutoChyPlelet ({source: function (requête, processus) {var matchCount = this.options.items; // renvoie le nombre maximum de résultats de résultats $. processus (respdata);});}, formatitem: fonction (item) {return item ["RegionName"] + "(" + item [RegionNameen "] +", "+ item [RegionShortNameen"] + ") {return [RegionCode"]; {'Data-Value': item ["RegionName"], 'Real-Value': Item ["RegionCode"]};}}); $ ("# gobtn"). Cliquez sur (fonction () {// Obtenez la valeur réelle de la zone de texte var RegionCode = $ ("# AutoChyPleletInput"). Att ("Real-Value") || ""; alert (RegionCode);});Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.