Przykładem jQuery UI - automatycznie (autouzupełnianie)

Poprzedni: jQuery UI przykład - składany panel (akordeon)

Dalej: jQuery UI instancji - Button (Przycisk)

Wyszukiwanie i wartość filtru na podstawie danych wprowadzonych przez użytkownika, dzięki czemu użytkownicy mogą szybko znaleźć i wybrać z listy wstępnie ustawionych wartości.

Więcej informacji na temat komponentu autouzupełniania, zobacz dokumentację API automatycznie człon (Autouzupełnianie widżet) .

W tej sekcji można search.php pobrania .

Domyślną funkcją

Gdy pole wprowadzania, odbywa się automatycznie (autouzupełniania) członków udzielać porad. W tym przykładzie, dostarczony jest zalecaną opcją języka programowania, można wpisać "ja" spróbować, można uzyskać Java lub JavaScript.

Źródłem danych jest prosta tablica JavaScript stosując dostępne dla członków przedstawiamy opcje źródła.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - Domyślna funkcja </ 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"
      "Schemat"
    ];
    $ ( "#tags") .autocomplete ({
      źródło: availableTags
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Label for = "tagów"> tag: </ label>
  <Id = "Wejście tags">
</ Div>
 
 
</ Body>
</ Html>

akcentowany

Pole autouzupełnianie używając opcji source, aby dostosować wyniki pasujące elementy z znaków akcentowanych, nawet jeśli pole tekstowe nie zawiera znaki akcentowane będą pasować. Ale jeśli wpiszesz znaki akcentowane w polu tekstowym, nie wyświetla wyniki przedmiotów non-stresowych.

Spróbuj wpisać "Jo" widzisz "John" i "Jorn", a następnie wpisać "Jo", tylko patrz "Jorn".

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - akcentowane </ 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": "O"
    };
    var normalizować = function (wyrażenie) {
      var ret = "";
      for (var i = 0; i <term.length; i ++) {
        Ret + = accentMap [term.charAt (I)] || term.charAt (I);
      }
      powrót ret;
    };
 
    $ ( "#developer") .autocomplete ({
      źródło: function (wniosek, odpowiedź) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "I");
        Odpowiedź ($ .grep (nazwiska, function (value) {
          value = value.label || value.value || value;
          powrót matcher.test (wartość) || matcher.test (znormalizować (wartość));
        }));
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Form>
  <Label for = "deweloper"> Developer: </ label>
  <Id = Wejście "deweloper">
  </ Form>
</ Div>
 
 
</ Body>
</ Html>

klasyfikacja

Szukaj klasyfikacji wynik. Spróbuj wpisać "a" lub "N".

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - kategoria </ 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-autouzupełnianie-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </ Style>
  <Script>
  $ .widget ( "Custom.catcomplete", $ .ui.autocomplete {
    _renderMenu: function (ul pozycje) {
      var że = to,
        currentCategory = "";
      $ .each (Przedmioty, function (indeks, pozycja) {
        if (item.category! = currentCategory) {
          ul.append ( "<li class = 'ui-autouzupełnianie-kategoria"> "+ item.category +" </ li> ");
          currentCategory = item.category;
        }
        that._renderItemData (ul pkt);
      });
    }
  });
  </ Script>
  <Script>
  $ (Function () {
    Dane var = [
      {Label: "Anders" w kategorii: ""},
      {Label: "Andreas" w kategorii: ""},
      {Label: "Antal" w kategorii: ""},
      {Label: "annhhx10" w kategorii: "Produkty"},
      {Label: "annk K12" w kategorii: "Produkty"},
      {Label: "annttop C13" w kategorii: "Produkty"},
      {Label: "Anders Andersson" w kategorii: "Ludzie"},
      {Label: "Andreas Andersson" w kategorii: "Ludzie"},
      {Label: "Andreas Johnson" w kategorii: "Ludzie"}
    ];
 
    $ ( "#search") .catcomplete ({
      Opóźnienie: 0,
      Źródło: Dane
    });
  });
  </ Script>
</ Head>
<Body>
 
<Label for = "search"> Szukaj: </ label>
<Id = Wejście "szukaj">
 
 
</ Body>
</ Html>

Pole kombi (Combobox)

Niestandardowy komponent stworzony przez autouzupełnianie i Buttona. Można wpisać kilka znaków, aby w oparciu o wyniki filtrowania danych, lub wybrać z pełnej listy za pomocą przycisków.

Wejście jest odczytywany z istniejącego wybranych elementów, po przejściu do opcji autouzupełniania, aby dostosować źródła.

To nie jest idealne członkiem obsługiwane. Tu jest po prostu wykazać autouzupełniania opcji personalizacji. Aby uzyskać więcej informacji o tej części robót, kliknij tutaj, aby wyświetlić artykuły jQuery.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - pole kombi (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-przełącznik {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    / * Wsparcie: IE7 * /
    * Wysokość: 1.7em;
    * Top: 0.1em;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 0.3em;
  }
  </ Style>
  <Script>
  (Function ($) {
    $ .widget ( "Custom.combobox", {
      _create: function () {
        this.wrapper = $ ( "<span>")
          .addClass ( "custom-combobox")
          .insertAfter (this.element);
 
        this.element.hide ();
        this._createAutocomplete ();
        this._createShowAllButton ();
      }
 
      _createAutocomplete: function () {
        var selected = this.element.children ( ": wybrane"),
          value = selected.val () selected.text (): "";?
 
        this.input = $ ( "<input>")
          .appendTo (this.wrapper)
          .val (wartość)
          .attr ( "Tytuł", "")
          .addClass ( "custom-combobox-input-ui ui widget widget-content-ui-state-default ui-corner-left")
          .autocomplete ({
            Opóźnienie: 0,
            MINLENGTH: 0,
            źródło: $ .proxy (ta "_source")
          })
          .tooltip ({
            tooltipClass: "ui-state-highlight"
          });
 
        this._on (this.input {
          autocompleteselect: function (event, ui) {
            ui.item.option.selected = true;
            this._trigger ( "select", zdarzenie {
              artykuł: ui.item.option
            });
          }
 
          autocompletechange: "_removeIfInvalid"
        });
      }
 
      _createShowAllButton: function () {
        Wejście var = this.input,
          wasOpen = false;
 
        $ ( "Ra")
          .attr ( "tabIndex" 1)
          .attr ( "title", "Pokaż wszystkie przedmioty")
          .tooltip ()
          .appendTo (this.wrapper)
          .button ({
            Ikony: {
              Podstawowym "ui-icon-trójkąt-1-s"
            }
            Tekst: false
          })
          .removeClass ( "UI-corner-all")
          .addClass ( "custom-combobox-przełączania ui-corner-prawo")
          .mousedown (function () {
            wasOpen = input.autocomplete ( "widget") .is ( "visible");
          })
          .Kliknij (function () {
            input.focus ();
 
            // Jeśli widzieliście zostaje zamknięty, jeżeli (wasOpen) {
              return;
            }
 
            // Hasło pusty ciąg jako wartość wyszukiwania, pokazując wszystkie wyniki input.autocomplete ( "Szukaj", "");
          });
      }
 
      _source: function (wniosek, odpowiedź) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "I");
        Odpowiedź (this.element.children ( "Opcja") .map (function () {
          var text = $ (this) .text ();
          if (this.value && (! request.term || matcher.test (tekst)))
            powrót {
              Etykieta: tekst,
              Wartość: tekst,
              Opcja: jest
            };
        }));
      }
 
      _removeIfInvalid: function (event, ui) {
 
        // Wybierz element i nie wykonuje innych czynności if (ui.item) {
          return;
        }
 
        // Szukaj meczu (wielkość liter ma znaczenie)
        wartość zmienna = this.input.val ()
          valueLowerCase = value.toLowerCase ()
          ważne = false;
        this.element.children ( "Opcja") .each (function () {
          if ($ (this) .text (). toLowerCase () === valueLowerCase) {
            this.selected = ważne = true;
            return false;
          }
        });
 
        // Zostanie znaleziony, żadne inne działania, jeśli (ważny) {
          return;
        }
 
        // Usunięcie wartości this.input nieprawidłowy
          .val ( "")
          .attr ( "title", wartość + "Nie znaleziono żadnych pozycji")
          .tooltip ( "open");
        this.element.val ( "");
        this._delay (function () {
          this.input.tooltip ( "Zamknij") .attr ( "Tytuł", "");
        }, 2500);
        this.input.data ( "UI-autouzupełnianie") .term = "";
      }
 
      _destroy: function () {
        this.wrapper.remove ();
        this.element.show ();
      }
    });
  }) (JQuery);
 
  $ (Function () {
    $ ( "#combobox") .combobox ();
    $ ( "#toggle") .Kliknij (Function () {
      $ ( "#combobox") .toggle ();
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Label> Twój ulubiony język programowania: </ label>
  <Select id = "combobox">
    <Wartość Option = ""> Wybierz ... </ option>
    <Wartość Option = "ActionScript"> ActionScript </ option>
    <Wartość Option = "AppleScript"> AppleScript </ option>
    <Wartość Option = "asp"> Asp </ option>
    <Wartość Option = "BASIC"> BASIC </ option>
    <Wartość Option = "C"> C </ option>
    <Wartość Option = "C ++"> C ++ </ option>
    <Wartość Option = "Clojure"> Clojure </ option>
    <Wartość Option = "COBOL"> COBOL </ option>
    <Wartość Option = "ColdFusion"> ColdFusion </ option>
    <Wartość Option = "Erlang"> Erlang </ option>
    <Wartość Option = "Fortran"> Fortran </ option>
    <Wartość Option = "Groovy"> Groovy </ option>
    <Wartość Option = "Haskell"> Haskell </ option>
    <Wartość Option = "Java"> Java </ option>
    <Wartość Option = "javascript"> JavaScript </ option>
    <Wartość Option = "Lisp"> Lisp </ option>
    <Wartość Option = "Perl"> Perl </ option>
    <Wartość Option = "php"> PHP </ option>
    <Wartość Option = "Python"> Python </ option>
    <Wartość Option = "Ruby"> Ruby </ option>
    <Wartość Option = "Scala"> Scala </ option>
    <Wartość Option = "Program"> System </ option>
  </ Select>
</ Div>
<Button id = "przełącznik"> wyświetlacz okno wyboru oparty </ button>
 
 
</ Body>
</ Html>

Dane niestandardowe i wyświetlacz

Można użyć niestandardowego formatu danych, a skupiając się po prostu zastąpić domyślne zachowanie i wybrać do wyświetlania danych.

Spróbuj wpisać "J", lub naciśnij klawisz strzałki w dół, można uzyskać listę elementów.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - dane niestandardowe i wyświetlacze </ 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>
  # Project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1 em;
  }
  # Project-ikona {
    float: left;
    height: 32px;
    width: 32px;
  }
  # Projektem Opis {
    margin: 0;
    padding: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    Projekty var = [
      {
        wartość: "jQuery"
        Etykieta: "jQuery"
        desc: "zapis mniej, zrobić więcej, biblioteki JavaScript"
        Ikona "jquery_32x32.png"
      }
      {
        wartość: "jquery-ui"
        Etykieta: "jQuery UI"
        desc: "oficjalna biblioteki interfejsu użytkownika dla jQuery"
        Ikona "jqueryui_32x32.png"
      }
      {
        wartość: "sizzlejs"
        Etykieta: "Trzask JS"
        desc: "silnik wybieraka czystej JavaScript CSS"
        Ikona "sizzlejs_32x32.png"
      }
    ];
 
    $ ( "#project") .autocomplete ({
      MINLENGTH: 0,
      źródło: projekty,
      skupić: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        return false;
      }
      wybierz: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        $ ( "# Project-id") .val (ui.item.value);
        $ ( "# Project-description") .html (ui.item.desc);
        $ ( "# Project-ikona") .attr ( "src", "images /" + ui.item.icon);
 
        return false;
      }
    })
    Funkcja .data ( "UI-autouzupełnianie") ._ renderItem = (ul pozycja) {
      return $ ( "<li>")
        .append ( "Ra" + item.label + "Największa" + item.desc + "</a>")
        .appendTo (UL);
    };
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "Projekt-label"> Wybierz pozycję (typ "J"): </ div>
<Img id = "Projekt-icon" src = "images / transparent_1x1.png" class = "ui-state-default" alt = "">
<Id = Wejście "projekt">
<Input type = "hidden" id = "Projekt-id">
<P id = "Projekt-description"> </ p>
 
 
</ Body>
</ Html>

Wiele wartości

Zastosowanie: Wpisz kilka znaków, takich jak "j", można zobaczyć wyniki odpowiednich języków programowania. Wybierz wartość, a następnie wpisz znaki nadal dodawać dodatkową wartość.

Ten przykład pokazuje, jak korzystać z opcji source i wydarzeń do osiągnięcia wartości jednego pola tekstowego, aby wprowadzić wiele automatyczne.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - wiele wartości </ 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"
      "Schemat"
    ];
    Podział funkcji (val) {
      powrót val.split (/ \ s * /);
    }
    Funkcja extractLast (termin) {
      powrót split (termin) .pop ();
    }
 
    $ ( "#tags")
      // Po wybraniu elementu bez konieczności opuszczania pola tekstowego .bind ( "keyDown", function (event) {
        if (event.keyCode === $ .ui.keyCode.TAB &&
            $ (This) .data ( "UI-autouzupełnianie") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        MINLENGTH: 0,
        źródło: function (wniosek, odpowiedź) {
          // Powrót autouzupełnianie, ale aby wyodrębnić ostatnią odpowiedź wejścia ($ .ui.autocomplete.filter (
            availableTags, extractLast (request.term)));
        }
        skupić: function () {
          // Insert Prevent uzyskania wartości ostrości return false;
        }
        wybierz: function (event, ui) {
          Terminy var = split (this.value);
          // Usunięcie bieżącego wejścia terms.pop ();
          // Dodaj wybraną terms.push opcji (ui.item.value);
          // Dodaj zastępczy, dodać przecinek na końcu + Spacja terms.push ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Label for = ""> tagów języków programowania: </ label>
  <Wejście id = "tagi" size = "50">
</ Div>
 
 
</ Body>
</ Html>

Wiele wartości, zdalne

Zastosowanie: Wpisz dwa znaki przynajmniej uzyskać nazwy ptaków. Wybierz wartość, a następnie wpisz znaki nadal dodawać dodatkową wartość.

Ten przykład pokazuje, jak korzystać z opcji source i wydarzeń do osiągnięcia wartości jednego pola tekstowego, aby wprowadzić wiele automatyczne.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - wiele wartości, zdalne </ 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-autouzupełnianie ładowania {
    background: white url ( 'images / ui-anim_basic_16x16.gif') tuż Centrum no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    Podział funkcji (val) {
      powrót val.split (/ \ s * /);
    }
    Funkcja extractLast (termin) {
      powrót split (termin) .pop ();
    }
 
    $ ( "#birds")
      // Po wybraniu elementu bez konieczności opuszczania pola tekstowego .bind ( "keyDown", function (event) {
        if (event.keyCode === $ .ui.keyCode.TAB &&
            $ (This) .data ( "UI-autouzupełnianie") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        źródło: function (wniosek, odpowiedź) {
          $ .getJSON ( "Search.php", {
            Termin: extractLast (request.term)
          } Response);
        }
        Wyszukiwarka: function () {
          // Klienta Minimalna długość var Termin = extractLast (this.value);
          if (term.length <2) {
            return false;
          }
        }
        skupić: function () {
          // Insert Prevent uzyskania wartości ostrości return false;
        }
        wybierz: function (event, ui) {
          Terminy var = split (this.value);
          // Usunięcie bieżącego wejścia terms.pop ();
          // Dodaj wybraną terms.push opcji (ui.item.value);
          // Dodaj zastępczy, dodać przecinek na końcu + Spacja terms.push ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <= "Etykieta dla ptaków"> ptaków: </ label>
  <Wejście id = "Ptaki" size = "50">
</ Div>
 
 
</ Body>
</ Html>

Zdalne źródło danych JSONP

Podczas wpisywania znaków w polu tekstowym, komponenty autouzupełniania dawać wyniki poradę. W tym przykładzie, po wpisaniu co najmniej dwa znaki w polu tekstowym, wyświetli nazwę właściwego miasta.

W tym przykładzie, źródło danych geonames.org WebService . Choć wybór pola tekstowego po elementem jest nazwa miasta, ale wyświetli więcej informacji, aby wybrać właściwą pozycję. Dane mogą być również oddzwaniania, wyniki są wyświetlane w polu poniżej.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - JSONP zdalnego źródła danych </ 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-autouzupełnianie ładowania {
    background: white url ( 'images / ui-anim_basic_16x16.gif') tuż Centrum no-repeat;
  }
  #city {width: 25em;}
  </ Style>
  <Script>
  $ (Function () {
    Funkcja log (komunikat) {
      $ ( "<Div>") .text (komunikat) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#city") .autocomplete ({
      źródło: function (wniosek, odpowiedź) {
        $ .ajax ({
          url: "http://ws.geonames.org/searchJSON"
          dataType: "jsonp"
          Dane: {
            featureClass: "P"
            Styl: "full",
            maxRows: 12,
            name_startsWith: request.term
          }
          success: function (data) {
            Odpowiedź ($ .map (data.geonames funkcja (pozycja) {
              powrót {
                Etykieta: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
                wartość: item.name
              }
            }));
          }
        });
      }
      MINLENGTH: 2,
      wybierz: function (event, ui) {
        log (ui.item?
          "Selected:" + ui.item.label:
          "Wybrano Nic, wejście było" + this.value);
      }
      otwarcia: function () {
        $ (This) .removeClass ( "UI-corner-all") .addClass ( "UI-corner-top");
      }
      w pobliżu: function () {
        $ (This) .removeClass ( "UI-corner-top") .addClass ( "UI-corner-all");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Label for = "city"> Twoje miasto: </ label>
  <Id = Wejście "miasto">
  Powered by <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
 
<Div class = "UI-widżet" style = "margin-top: 2em; font-family: Arial">
  wyniki:
  <Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "widget-ui-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>

Zdalne źródło danych

W tym przykładzie źródłem danych jest zwracana danych JSON skrypt po stronie serwera, aby określić proste opcje źródła. Ponadto opcja MINLENGTH jest ustawiony na 2, aby uniknąć zapytanie zwróci zbyt wiele wyników, wybierz zdarzenie, aby wyświetlić informację zwrotną.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - zdalne źródło danych </ 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-autouzupełnianie ładowania {
    background: white url ( 'images / ui-anim_basic_16x16.gif') tuż Centrum no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    Funkcja log (komunikat) {
      $ ( "<Div>") .text (komunikat) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#birds") .autocomplete ({
      źródło: "search.php"
      MINLENGTH: 2,
      wybierz: function (event, ui) {
        log (ui.item?
          "Selected:" + ui.item.value + "aka" + ui.item.id:
          "Wybrano Nic, wejście było" + this.value);
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <= "Etykieta dla ptaków"> ptaków: </ label>
  <Id = "Wejście ptaki">
</ Div>
 
<Div class = "UI-widżet" style = "margin-top: 2em; font-family: Arial">
  wyniki:
  <Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "widget-ui-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>

Zdalna skrzynka

Aby zwiększyć wydajność, należy dodać tutaj kilka lokalnej pamięci podręcznej, inne przypadki podobnych źródeł danych zdalnych. Tutaj tylko zapisane cache zapytań, a pamięć podręczna może być przedłużony do wielu wartości, każdy wpis jest wartością.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - Zdalne Cache </ 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-autouzupełnianie ładowania {
    background: white url ( 'images / ui-anim_basic_16x16.gif') tuż Centrum no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    var cache = {};
    $ ( "#birds") .autocomplete ({
      MINLENGTH: 2,
      źródło: function (wniosek, odpowiedź) {
        Termin var = request.term;
        if (warunek w pamięci podręcznej) {
          Odpowiedź (cache [Termin]);
          return;
        }
 
        $ .getJSON ( "Search.php", prośba, function (dane, status, XHR) {
          cache [Termin] = dane;
          odpowiedzi (danych);
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <= "Etykieta dla ptaków"> ptaków: </ label>
  <Id = "Wejście ptaki">
</ Div>
 
 
</ Body>
</ Html>

wynik Przewijany

Podczas wyświetlania długą listę opcji, można po prostu ustawić max-height aby zapobiec autouzupełniania MENU, aby wyświetlić menu też. Spróbuj wpisać "A" lub "S", aby uzyskać wynik długiej listy przewijanej.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - wynik przewijane </ 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-autouzupełniania {
    max-height: 100px;
    overflow-y: auto;
    / * Zapobiega poziomego paska przewijania * /
    overflow-x: hidden;
  }
  / * IE 6 nie obsługuje max-height
   * Używamy zamiast wysokości, ale zmusi menu jest zawsze wyświetlany jako wysokość * /
  * HTML .ui-autouzupełniania {
    height: 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"
      "Schemat"
    ];
    $ ( "#tags") .autocomplete ({
      źródło: availableTags
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <Label for = "tagów"> tag: </ label>
  <Id = "Wejście tags">
</ Div>
 
 
</ Body>
</ Html>

dane XML

Ten przykład pokazuje, jak uzyskać jakieś dane XML i wykorzystuje metodę jQuery rozwiązać go i dostarczyć go do autouzupełniania jako źródło danych.

Ten przykład być również używany jako rozwiązanie zdalnego adresowania źródła danych XML - Analiza wystąpić w każdym żądaniu źródłem zwrotnego.

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI auto-completion (autouzupełnianie) - dane 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-autouzupełnianie ładowania {background: white url ( 'images / ui-anim_basic_16x16.gif') tuż Centrum no-repeat;}
  </ Style>
  <Script>
  $ (Function () {
    Funkcja log (komunikat) {
      $ ( "<Div />") .text (komunikat) .prependTo ( "#log");
      $ ( "#log") .attr ( "ScrollTop", 0);
    }
 
    $ .ajax ({
      url: "london.xml"
      dataType: "xml"
      success: function (xmlResponse) {
        var data = $ ( "geoname", xmlResponse) .map (function () {
          powrót {
            Wartość: $ ( "nazwa", this) .text () + "," +
              ($ .trim ($ ( "COUNTRYNAME", this) .text ()) || "(nieznany kraj)"),
            id: $ ( "geonameId", this) .text ()
          };
        .}) Get ();
        $ ( "#birds") .autocomplete ({
          Źródło: dane,
          MINLENGTH: 0,
          wybierz: function (event, ui) {
            log (ui.item?
              "Selected:" + ui.item.value + ", geonameId:" + ui.item.id:
              "Wybrano Nic, wejście było" + this.value);
          }
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "UI-widżet">
  <= "Etykieta dla ptaków"> Londyn Mecz: </ label>
  <Id = "Wejście ptaki">
</ Div>
 
<Div class = "UI-widżet" style = "margin-top: 2em; font-family: Arial">
  wyniki:
  <Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "widget-ui-content"> </ div>
</ Div>
 
 
</ Body>
</ Html>