Latest web development tutorials

exemple jQuery UI - automatiquement (Autocomplete)

Recherche et de la valeur de filtre basé sur l'entrée d'utilisateur, ce qui permet aux utilisateurs de trouver rapidement et choisir parmi une liste de valeurs prédéfinies.

Pour plus de détails sur le composant autocomplete, consultez la documentation de l' API automatiquement membre (le Autocomplete le Widget) .

Utilisez cette section pour search.php téléchargement .

La fonction par défaut

Lorsque vous champ de saisie, fait automatiquement membres (Autocomplete) fournissent des conseils. Dans cet exemple, il est prévu un langage de programmation de l'option recommandée, vous pouvez entrer "ja" l'essayer, vous pouvez obtenir Java ou JavaScript.

La source de données est un tableau simple JavaScript en utilisant une des options de source sont disponibles pour les membres.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp"
      "BASIC",
      «C»,
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Régime"
    ];
    $ ( "#tags") .autocomplete ({
      source: availableTags
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "tags"> tag: </ label>
  <Id d'entrée = "tags">
</ Div>
 
 
</ Body>
</ Html>

la

accentué

champ autocomplete en utilisant les options de source pour personnaliser les résultats pour correspondre à des éléments avec des caractères accentués, même si le champ de texte ne contient les caractères accentués ne correspondent pas. Mais si vous tapez les caractères accentués dans un champ de texte, il ne présente pas les résultats des éléments non-stress.

Essayez de taper "Jo", vous voyez "John" et "Jorn", puis tapez "Jo", ne verra "Jorn".

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - accentués </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    var names = [ "Jörn Zaefferer", "Scott González", "John Resig"];
 
    var accentMap = {
      "A": "a",
      "Ö": "o"
    };
    var normalize = function (terme) {
      var ret = "";
      for (var i = 0; i <term.length; i ++) {
        ret + = accentMap [term.charAt (i)] || term.charAt (i);
      }
      retour ret;
    };
 
    $ ( "#developer") .autocomplete ({
      source: fonction (demande, réponse) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
        réponse ($ .grep (noms, fonction (valeur) {
          value = value.label || value.value || valeur;
          retour matcher.test (valeur) || matcher.test (normaliser (valeur));
        }));
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Form>
  <Label for = "développeur"> Développeur: </ label>
  <Id d'entrée = "développeur">
  </ Form>
</ Div>
 
 
</ Body>
</ Html>

la

classification

Résultat de la recherche classification. Essayez de taper "a" ou "n".

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - Catégorie </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete-catégorie {
    font-weight: bold;
    padding: .2em .4em;
    margin: 0 .8em .2em;
    line-height: 1.5;
  }
  </ Style>
  <Script>
  $ .widget ( "Custom.catcomplete", .ui.autocomplete $, {
    _renderMenu: function (ul, articles) {
      var = que cela,
        currentCategory = "";
      $ .each (Articles, fonction (index, item) {
        if (item.category! = currentCategory) {
          ul.append ( "<li class = 'ui-autocomplete-catégorie'>" + item.category + "</ li>");
          currentCategory = item.category;
        }
        that._renderItemData (ul, item);
      });
    }
  });
  </ Script>
  <Script>
  $ (Function () {
    Data = var [
      {Label: "anders", catégorie: ""},
      {Label: "andreas", catégorie: ""},
      {Label: "antal", catégorie: ""},
      {Label: "annhhx10", catégorie: "Produits"},
      {Label: "K12 annk", catégorie: "Produits"},
      {Label: "C13 annttop", catégorie: "Produits"},
      {Label: "anders andersson", catégorie: "People"},
      {Label: "andreas andersson", catégorie: "People"},
      {Label: "andreas johnson", catégorie: "People"}
    ];
 
    $ ( "#search") .catcomplete ({
      retard: 0,
      source: données
    });
  });
  </ Script>
</ Head>
<Body>
 
<Label for = "search"> Recherche: </ label>
<Id d'entrée = "search">
 
 
</ Body>
</ Html>

la

Combo box (ComboBox)

Un composant personnalisé créé par le Autocomplete et Button. Vous pouvez taper quelques caractères pour obtenir basés sur vos résultats de filtrage d'entrée, ou choisir parmi la liste complète à l'aide des boutons.

L'entrée est lue dans un des éléments de sélection existants, après avoir passé à l'option Autocomplete pour personnaliser la source.

Ce n'est pas un membre parfait non pris en charge. Voici simplement démontrer les caractéristiques de personnalisation autocomplete. Pour plus de détails sur cette partie des travaux, s'il vous plaît cliquez ici pour afficher les articles jQuery.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - zone de liste déroulante (Combobox) </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    / * Support: IE7 * /
    * Hauteur: 1.7em;
    * Top: 0.1em;
  }
  .custom-combobox-entrée {
    margin: 0;
    padding: 0.3em;
  }
  </ Style>
  <Script>
  (Fonction ($) {
    $ .widget ( «Custom.combobox» {
      _create: function () {
        this.wrapper = $ ( "<span>")
          .addClass ( "custom-combobox")
          .insertAfter (this.element);
 
        this.element.hide ();
        this._createAutocomplete ();
        this._createShowAllButton ();
      },
 
      _createAutocomplete: function () {
        var = sélectionné this.element.children ( ": sélectionnés"),
          value = selected.val () selected.text (): "";?
 
        this.input = $ ( "<input>")
          .appendTo (this.wrapper)
          .val (valeur)
          .attr ( "title", "")
          .addClass ( "custom-combobox-entrée ui-widget ui-widget-content ui-état par défaut ui-coin-gauche»)
          .autocomplete ({
            retard: 0,
            minLength: 0,
            source: .proxy $ (ce "source_",)
          })
          .tooltip ({
            tooltipClass: "ui-state-highlight"
          });
 
        this._on (this.input {
          autocompleteselect: function (event, ui) {
            ui.item.option.selected = true;
            this._trigger ( "select", événement, {
              article: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function () {
        entrée var = this.input,
          wasOpen = false;
 
        $ ( "<a>")
          .attr ( "tabIndex", -1)
          .attr ( "title", "Tous les objets")
          (.tooltip)
          .appendTo (this.wrapper)
          .button ({
            icônes: {
              primaire: "ui-icon-triangle-1-s"
            },
            texte: false
          })
          .removeClass ( "ui-coin-tout»)
          .addClass ( "custom-combobox-toggle ui-coin-droit»)
          .mousedown (function () {
            wasOpen = input.autocomplete ( "widget") .is ( ": visible");
          })
          .cliquez (function () {
            input.focus ();
 
            // Si vous avez vu est fermé si (wasOpen) {
              retour;
            }
 
            // Passez une chaîne vide comme la valeur de la recherche, montrant tous les résultats input.autocomplete ( "search", "");
          });
      },
 
      source_: function (demande, réponse) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
        réponse (this.element.children ( "option") .map (function () {
          texte var = $ (this) .text ();
          if (this.value && (! request.term || matcher.test (texte)))
            retour {
              label: texte,
              valeur: texte,
              Option: ceci
            };
        }));
      },
 
      _removeIfInvalid: function (event, ui) {
 
        // Sélectionnez un élément et ne pas effectuer d'autres actions si (ui.item) {
          retour;
        }
 
        // Recherche d'un match (insensible à la casse)
        var value = this.input.val (),
          valueLowerCase = value.toLowerCase (),
          valide = false;
        this.element.children ( "option") .each (function () {
          if ($ (this) .text (). toLowerCase () === valueLowerCase) {
            this.selected = valide = true;
            return false;
          }
        });
 
        // Une correspondance est trouvée, aucune autre action si (valide) {
          retour;
        }
 
        // Retirez le this.input de valeur non valide
          .val ( "")
          .attr ( "title", valeur + "ne correspond à aucun élément")
          .tooltip ( «ouvert»);
        this.element.val ( "");
        this._delay (function () {
          this.input.tooltip ( "close") .attr ( "title", "");
        }, 2500);
        this.input.data ( "ui-autocomplete") .term = "";
      },
 
      _destroy: function () {
        this.wrapper.remove ();
        this.element.show ();
      }
    });
  }) (JQuery);
 
  $ (Function () {
    $ ( "#combobox") .combobox ();
    $ .cliquez ( "#toggle") (Function () {
      $ ( "#combobox") .toggle ();
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label> votre langage de programmation préféré: </ label>
  <Sélectionnez id = "combobox">
    <Option value = ""> Choisissez ... </ option>
    <Option value = "ActionScript"> ActionScript </ option>
    <Option value = "AppleScript"> AppleScript </ option>
    <Option value = "Asp"> Asp </ option>
    <Option value = "BASIC"> BASIC </ option>
    <Option value = "C"> C </ option>
    <Option value = "C ++"> C ++ </ option>
    <Option value = "Clojure"> Clojure </ option>
    <Option value = "COBOL"> COBOL </ option>
    <Option value = "ColdFusion"> ColdFusion </ option>
    <Option value = "Erlang"> Erlang </ option>
    <Option value = "Fortran"> Fortran </ option>
    <Option value = "Groovy"> Groovy </ option>
    <Option value = "Haskell"> Haskell </ option>
    <Option value = "Java"> Java </ option>
    <Option value = "JavaScript"> JavaScript </ option>
    <Option value = "Lisp"> Lisp </ option>
    <Option value = "Perl"> Perl </ option>
    <Option value = "PHP"> PHP </ option>
    <Option value = "Python"> Python </ option>
    <Option value = "Ruby"> Ruby </ option>
    <Option value = "Scala"> Scala </ option>
    <Option value = "Scheme"> Schéma </ option>
  </ Select>
</ Div>
<Bouton id = "toggle"> boîte de sélection en fonction d'affichage </ button>
 
 
</ Body>
</ Html>

la

données et affichage sur mesure

Vous pouvez utiliser un format de données personnalisé, et en se concentrant simplement remplacer le comportement par défaut et sélectionnez pour afficher les données.

Essayez de taper "j", ou appuyez sur la flèche vers le bas, vous pouvez obtenir une liste d'éléments.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - données et affiche personnalisées </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  # Projet-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  # Projet-icon {
    float: left;
    hauteur: 32px;
    largeur: 32px;
  }
  # Projet de description {
    margin: 0;
    padding: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    projets var = [
      {
        valeur: "jquery",
        label: "jQuery",
        desc: "l'écriture moins, faire plus, bibliothèque JavaScript",
        icône: "jquery_32x32.png"
      },
      {
        valeur: "jquery-ui",
        label: "jQuery UI",
        desc: "la bibliothèque officielle de l'interface utilisateur pour jQuery",
        icône: "jqueryui_32x32.png"
      },
      {
        valeur: "sizzlejs",
        label: "Sizzle JS",
        desc: "un moteur de sélection pur JavaScript CSS»,
        icône: "sizzlejs_32x32.png"
      }
    ];
 
    $ ( "#project") .autocomplete ({
      minLength: 0,
      source: projets,
      focus: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        return false;
      },
      sélectionnez: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        $ ( "# Projet-id") .val (ui.item.value);
        $ ( "# Projet-description") .html (ui.item.desc);
        $ ( "# Projet-icon") .attr ( "src", "images /" + ui.item.icon);
 
        return false;
      }
    })
    .data ( "ui-autocomplete") ._ renderItem = function (ul, item) {
      return $ ( "<li>")
        .append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo (ul);
    };
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "projet-label"> Sélectionnez un élément (type "j"): </ div>
<Img id = "projet-icône" src = "images / transparent_1x1.png" class = "ui-état par défaut" alt = "">
<Id d'entrée = "projet">
<Input type = id "caché" = "projet-id">
<P id = "projet-description"> </ p>
 
 
</ Body>
</ Html>

la

Plusieurs valeurs

Utilisation: Tapez quelques caractères, tels que "j", vous pouvez voir les résultats des langages de programmation pertinents. Sélectionnez une valeur, puis tapez les caractères continuent à ajouter de la valeur supplémentaire.

Cet exemple montre comment utiliser les options et les événements source pour obtenir la valeur d'un seul champ de texte pour saisir plusieurs automatique.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - plusieurs valeurs </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp"
      "BASIC",
      «C»,
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Régime"
    ];
    fonction split (val) {
      retour val.split (/, \ s * /);
    }
    fonction extractLast (terme) {
      split (terme) retour .pop ();
    }
 
    $ ( «#tags»)
      // Lorsque vous sélectionnez un élément sans quitter le champ de texte .bind ( "keydown", function (event) {
        if (event.keyCode === $ .ui.keyCode.TAB &&
            $ (Ce) .data ( "ui-autocomplete") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        minLength: 0,
        source: fonction (demande, réponse) {
          // Autocomplete Retour, mais pour extraire la dernière réponse d'entrée ($ .ui.autocomplete.filter (
            availableTags, extractLast (request.term)));
        },
        focus: function () {
          // Empêcher l'obtention de valeurs d'insertion de discussion return false;
        },
        sélectionnez: function (event, ui) {
          termes var = split (this.value);
          // Retirez le terms.pop d'entrée de courant ();
          // Ajoute l'option terms.push sélectionnée (ui.item.value);
          // Ajout d'un espace réservé, ajouter une virgule à la fin de terms.push Space + ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "tags"> Programming Languages: </ label>
  <Entrée id = taille "tags" = "50">
</ Div>
 
 
</ Body>
</ Html>

la

Plusieurs valeurs, à distance

Utilisation: Tapez les deux caractères au moins pour obtenir les noms d'oiseaux. Sélectionnez une valeur, puis tapez les caractères continuent à ajouter de la valeur supplémentaire.

Cet exemple montre comment utiliser les options et les événements source pour obtenir la valeur d'un seul champ de texte pour saisir plusieurs automatique.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - plusieurs valeurs, à distance </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete chargement {
    background: url blanc ( 'images / ui-anim_basic_16x16.gif') de centre-droit no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    fonction split (val) {
      retour val.split (/, \ s * /);
    }
    fonction extractLast (terme) {
      split (terme) retour .pop ();
    }
 
    $ ( "") #birds
      // Lorsque vous sélectionnez un élément sans quitter le champ de texte .bind ( "keydown", function (event) {
        if (event.keyCode === $ .ui.keyCode.TAB &&
            $ (Ce) .data ( "ui-autocomplete") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        source: fonction (demande, réponse) {
          $ .getJSON ( "Search.php", {
            terme: extractLast (request.term)
          }, Réponse);
        },
        recherche: function () {
          // Personnalisée minimum terme longueur var = extractLast (de this.value);
          if (term.length <2) {
            return false;
          }
        },
        focus: function () {
          // Empêcher l'obtention de valeurs d'insertion de discussion return false;
        },
        sélectionnez: function (event, ui) {
          termes var = split (this.value);
          // Retirez le terms.pop d'entrée de courant ();
          // Ajoute l'option terms.push sélectionnée (ui.item.value);
          // Ajout d'un espace réservé, ajouter une virgule à la fin de terms.push Space + ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "oiseaux"> Bird: </ label>
  <Entrée id = taille "oiseaux" = "50">
</ Div>
 
 
</ Body>
</ Html>

la

données à distance la source JSONP

Lorsque vous tapez des caractères dans un champ de texte, les composants Autocomplete donnent des résultats des conseils. Dans cet exemple, lorsque vous tapez au moins deux caractères dans un champ de texte, il affiche le nom de la ville concernée.

Dans cet exemple, la source de données est geonames.org service Web . Bien que le choix d'un champ de texte après que l'élément est le nom de la ville, mais affichera plus d'informations pour trouver l'entrée correcte. Les données peuvent également être un rappel, les résultats sont affichés dans la case ci-dessous.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - source de données distante JSONP </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete chargement {
    background: url blanc ( 'images / ui-anim_basic_16x16.gif') de centre-droit no-repeat;
  }
  #city {width: 25em;}
  </ Style>
  <Script>
  $ (Function () {
    fonction log (message) {
      $ ( "<Div>") .text (message) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#city") .autocomplete ({
      source: fonction (demande, réponse) {
        .ajax $ ({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          données: {
            featureClass: «P»,
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
          },
          succès: function (data) {
            réponse ($ .map (data.geonames, function (item) {
              retour {
                label: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
                Valeur: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      sélectionnez: function (event, ui) {
        log (ui.item?
          "Sélectionné:" + ui.item.label:
          "Rien sélectionné, l'entrée était" + this.value);
      },
      ouvrir: function () {
        $ (Ce) .removeClass ( "ui-coin-all") .addClass ( "ui-coin-top");
      },
      à proximité: function () {
        $ (Ce) .removeClass ( "ui-coin-top") .addClass ( "ui-coin-all");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "ville"> votre ville: </ label>
  <Id d'entrée = "ville">
  Propulsé par <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
 
<Class Div = "ui-widget" style = "margin-top: 2em; font-family: Arial">
  Résultats:
  <Div id = le style "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>

la

La source de données distante

Lorsque vous tapez des caractères dans un champ de texte, les composants Autocomplete donnent des résultats des conseils. Dans cet exemple, lorsque vous tapez au moins deux caractères dans un champ de texte, il affichera les noms pertinents d'oiseaux.

Dans cet exemple, la source de données est renvoyé JSON script de données côté serveur pour spécifier un simple options de source. En outre, l'option minLength est réglé sur 2, pour éviter la requête renvoie trop de résultats, sélectionnez l'événement pour afficher des commentaires.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - source de données distante </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete chargement {
    background: url blanc ( 'images / ui-anim_basic_16x16.gif') de centre-droit no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    fonction log (message) {
      $ ( "<Div>") .text (message) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#birds") .autocomplete ({
      source: "search.php",
      minLength: 2,
      sélectionnez: function (event, ui) {
        log (ui.item?
          "Sélectionné:" + ui.item.value + "aka" + ui.item.id:
          "Rien sélectionné, l'entrée était" + this.value);
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "oiseaux"> Bird: </ label>
  <Id d'entrée = "oiseaux">
</ Div>
 
<Class Div = "ui-widget" style = "margin-top: 2em; font-family: Arial">
  Résultats:
  <Div id = le style "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>

la

cache à distance

Lorsque vous tapez des caractères dans un champ de texte, les composants Autocomplete donnent des résultats des conseils. Dans cet exemple, lorsque vous tapez au moins deux caractères dans un champ de texte, il affichera les noms pertinents d'oiseaux.

Pour améliorer les performances, ajouter ici un cache local quelques-uns, d'autres exemples de sources similaires de données à distance. Ici, seulement sauvé un cache de requêtes, et le cache peut être étendue à plusieurs valeurs, chaque entrée est une valeur.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - Cache à distance </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete chargement {
    background: url blanc ( 'images / ui-anim_basic_16x16.gif') de centre-droit no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    cache var = {};
    $ ( "#birds") .autocomplete ({
      minLength: 2,
      source: fonction (demande, réponse) {
        terme var = request.term;
        if (terme dans le cache) {
          réponse (cache [terme]);
          retour;
        }
 
        $ .getJSON ( "Search.php", demande, fonction (données, état, XHR) {
          cache [terme] = données;
          réponse (données);
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "oiseaux"> Bird: </ label>
  <Id d'entrée = "oiseaux">
</ Div>
 
 
</ Body>
</ Html>

la

résultat Scrollable

Lors de l'affichage d'une longue liste d'options, vous pouvez simplement mettre max-height pour empêcher le menu autocomplete pour afficher le menu aussi. Essayez de taper "a" ou "s" pour obtenir le résultat d'une longue liste déroulante.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - résultat scrollable </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    / * Empêcher la barre de défilement horizontale * /
    overflow-x: hidden;
  }
  / * IE 6 ne supporte pas le max-height
   * Nous utilisons au lieu de la hauteur, mais cela va forcer le menu est toujours affiché à la hauteur * /
  * Html .ui-autocomplete {
    hauteur: 100px;
  }
  </ Style>
  <Script>
  $ (Function () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp"
      "BASIC",
      «C»,
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Régime"
    ];
    $ ( "#tags") .autocomplete ({
      source: availableTags
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "tags"> tag: </ label>
  <Id d'entrée = "tags">
</ Div>
 
 
</ Body>
</ Html>

la

les données XML

Cet exemple montre comment obtenir des données XML et utilise la méthode jQuery pour le résoudre et le fournir à autocomplete comme source de données.

Cet exemple également être utilisé comme la résolution d'un XML référence de source de données à distance - Analyse se produisent à chaque demande source de rappel.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI auto-complétion (Autocomplete) - données XML </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-autocomplete chargement {background: url blanc ( 'images / ui-anim_basic_16x16.gif') de centre-droit no-repeat;}
  </ Style>
  <Script>
  $ (Function () {
    fonction log (message) {
      $ ( "<Div />") .text (message) .prependTo ( "#log");
      $ ( "#log") .attr ( "ScrollTop", 0);
    }
 
    .ajax $ ({
      url: "london.xml",
      dataType: "xml",
      succès: function (xmlResponse) {
        var data = $ ( "toponyme", xmlResponse) .map (function () {
          retour {
            valeur: $ ( "name", this) .text () + "," +
              (.trim $ ($ ( "CountryName", this) .text ()) || "(pays inconnu)"),
            id: $ ( "geonameId", this) .text ()
          };
        .}) Obtenir ();
        $ ( "#birds") .autocomplete ({
          source: données,
          minLength: 0,
          sélectionnez: function (event, ui) {
            log (ui.item?
              "Sélectionné:" + ui.item.value + ", geonameId:" + ui.item.id:
              "Rien sélectionné, l'entrée était" + this.value);
          }
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Class Div = "ui-widget">
  <Label for = "oiseaux"> London Match: </ label>
  <Id d'entrée = "oiseaux">
</ Div>
 
<Class Div = "ui-widget" style = "margin-top: 2em; font-family: Arial">
  Résultats:
  <Div id = le style "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>

la