jQuery UI API - Autocomplete Widget

Hinweis: Wenn das Vorschlagsmenü geöffnet ist,appendTosollte die Option nicht geändert werden.

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenenappendTooption:

$( ".selector" ).autocomplete({ appendTo: "#someElem" });
    

Nach der Initialisierung abrufen oder festlegenappendTooption:

// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
 
// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
    

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenenautoFocusoption:

$( ".selector" ).autocomplete({ autoFocus: true });
    

Nach der Initialisierung abrufen oder festlegenautoFocusoption:

// getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
 
// setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );
    

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenendelayoption:

$( ".selector" ).autocomplete({ delay: 500 });
    

Nach der Initialisierung abrufen oder festlegendelayoption:

// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );
    

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenendisabledoption:

$( ".selector" ).autocomplete({ disabled: true });
    

Nach der Initialisierung abrufen oder festlegendisabledoption:

// getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
// setter
$( ".selector" ).autocomplete( "option", "disabled", true );
    

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenenminLengthoption:

$( ".selector" ).autocomplete({ minLength: 0 });
    

Nach der Initialisierung abrufen oder festlegenminLengthoption:

// getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
// setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );
    

Codebeispiele:

Initialisiert ein Autocomplete mit der angegebenenpositionoption:

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
    

Nach der Initialisierung abrufen oder festlegenpositionoption:

// getter
var position = $( ".selector" ).autocomplete( "option", "position" );
 
// setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
    

Unabhängig von der verwendeten Variable wird die Beschriftung immer als Text behandelt. Wenn die Beschriftung als HTML behandelt werden soll, können SieScott González' HTML-Erweiterung verwenden. Die Demo konzentriert sich aufsourcedie verschiedenen Varianten der Option - Sie können diejenige finden, die zu Ihrer Verwendung passt, und den zugehörigen Code ansehen.

Mehrere Typen werden unterstützt:

• Array: Ein Array, das für lokale Daten verwendet werden kann. Zwei Formate werden unterstützt:
  • String-Array:[ "Choice1", "Choice2" ]
  • Ein Array von Objekten mitlabelundvalueAttributen:[ { label: "Choice1", value: "value1" }, ... ]
  Das label-Attribut wird im Vorschlagsmenü angezeigt. Wenn der Benutzer ein Element auswählt, wird der Wert in das input-Element eingefügt. Wenn nur ein Attribut angegeben wird, wird dieses Attribut sowohl als label als auch als value behandelt. Wenn Sie beispielsweise nurvaluedas Attribut angeben, wird der Wert auch als label behandelt.
• String: Wenn eine Zeichenfolge verwendet wird, erwartet das Autocomplete-Plugin, dass die Zeichenfolge auf eine URL-Ressource verweist, die JSON-Daten zurückgeben kann. Sie kann sich auf demselben Host oder auf einem anderen Host befinden (muss JSONP bereitstellen). Das Autocomplete-Plugin filtert die Ergebnisse nicht, sondern fügt stattdessen durch eintermFeld eine Abfragezeichenfolge hinzu, damit das serverseitige Skript die Ergebnisse filtern kann. Wenn beispielsweisesourcedie Option auf"http://example.com"gesetzt ist, und der Benutzerfooeingibt, wäre die GET-Anfragehttp://example.com?term=foo. Das Format der Daten selbst kann dasselbe sein wie das Format der zuvor beschriebenen lokalen Daten.
• Funktion: Die dritte Variable, eine Callback-Funktion, bietet die größte Flexibilität und kann verwendet werden, um jede Datenquelle mit dem Autocomplete-Plugin zu verbinden. Die Callback-Funktion akzeptiert zwei Parameter:
  • einrequestObjekt, mit einemtermAttribut, das den Wert in der aktuellen Texteingabe darstellt. Wenn der Benutzer beispielsweise in das Stadtfeld eingibt"new yo", dann entspricht der Autocomplete-Begriff der"new yo"。
  • aresponseCallback-Funktion, die einen einzelnen Parameter bereitstellt: die dem Benutzer vorgeschlagenen Daten. Die Daten sollten basierend auf dem bereitgestellten Begriff gefiltert werden und können in einem der oben beschriebenen lokalen Datenformate vorliegen. Wird verwendet, um einen benutzerdefinierten Quell-Callback bereitzustellen, um Fehler während der Anfrage zu behandeln. Auch wenn ein Fehler auftritt, müssen Sieresponsedie Callback-Funktion aufrufen. Dadurch wird sichergestellt, dass sich das Widget immer im richtigen Zustand befindet.

  Beim Filtern lokaler Daten können Sie die integrierte$.ui.autocomplete.escapeRegexFunktion verwenden. Sie akzeptiert ein String-Argument, maskiert alle Zeichen regulärer Ausdrücke und macht das Ergebnis sicher für die Übergabe annew RegExp()。

Codebeispiel:

Initialisieren Sie das Autocomplete mit den angegebenensourceOptionen:

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
    

Nach der Initialisierung abrufen oder festlegensourceoption:

// getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die close-Methode auf:

$( ".selector" ).autocomplete( "close" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die destroy-Methode auf:

$( ".selector" ).autocomplete( "destroy" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die disable-Methode auf:

$( ".selector" ).autocomplete( "disable" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die enable-Methode auf:

$( ".selector" ).autocomplete( "enable" );
    

• optionName
  Typ: String
  Beschreibung: Der Name der Option, die abgerufen werden soll.

Codebeispiel:

Methode aufrufen:

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Methode aufrufen:

var options = $( ".selector" ).autocomplete( "option" );
    

• optionName
  Typ: String
  Beschreibung: Der Name der Option, die festgelegt werden soll.
• value
  Typ: Object
  Beschreibung: Der Wert, der für die Option festgelegt werden soll.

Codebeispiel:

Methode aufrufen:

$( ".selector" ).autocomplete( "option", "disabled", true );
    

• options
  Typ: Object
  Beschreibung: Die Options-Wert-Paare, die festgelegt werden sollen.

Codebeispiel:

Methode aufrufen:

$( ".selector" ).autocomplete( "option", { disabled: true } );
    

• value
  Typ: String

Codebeispiel:

Die search-Methode aufrufen:

$( ".selector" ).autocomplete( "search", "" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Die widget-Methode aufrufen:

$( ".selector" ).autocomplete( "widget" );
    

Hinweis: Derzeit muss das<ul> erstellte Element ein <a> Element für die Kompatibilität mit dem Menü-Widget. Siehe das Beispiel unten.

• ul
  Typ: jQuery
  Beschreibung: Das neu erstellte<li>Element muss angehängt werden an das<ul>Element.
• item
  Typ: Object
  
  • label
    Typ: String
    Beschreibung: Die Zeichenfolge, die für den Eintrag angezeigt werden soll.
  • item
    Typ: String
    Beschreibung: Der Wert, der in das Eingabefeld eingefügt wird, wenn der Eintrag ausgewählt wird.

Codebeispiel:

Fügen Sie den Wert des Eintrags als<li>ein Datenattribut an

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( $( "<a>" ).text( item.label ) )
    .appendTo( ul );
}
    

• ul
  Typ: jQuery
  Beschreibung: Ein leeres<ul>Element, das als Menü des Widgets verwendet werden soll.
• items
  Typ: Array
  Beschreibung: Ein Array von Elementen, die mit der Benutzereingabe übereinstimmen. Jedes Element ist ein Objekt mit einerlabelundvalueEigenschaft.

Codebeispiel:

Fügt den alten Menüelementen einen CSS-Klassennamen hinzu.

_renderMenu: function( ul, items ) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item );
  });
  $( ul ).find( "li:odd" ).addClass( "odd" );
}
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Das Menü wird immer 500 Pixel breit angezeigt.

_resizeMenu: function() {
  this.menu.element.outerWidth( 500 );
}
    

• event
  Typ: Event
• ui
  Typ: Object
  • item
    Typ: Object
    Beschreibung: Das aus dem Menü ausgewählte Element, andernfalls ist die Eigenschaftnull。

Codebeispiel:

Initialisiert die Autocomplete mit dem angegebenen Change-Callback:

$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompletechange-Ereignis:

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object

Hinweis:uiDas Objekt ist leer; es ist zur Konsistenz mit anderen Ereignissen enthalten.

Codebeispiel:

Initialisieren Sie das Autocomplete mit dem angegebenen Close-Callback:

$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompleteclose-Ereignis:

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object

Hinweis:uiDas Objekt ist leer; es ist zur Konsistenz mit anderen Ereignissen enthalten.

Codebeispiel:

Initialisieren Sie das Autocomplete mit dem angegebenen Create-Callback:

$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompletecreate-Ereignis:

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object
  • item
    Typ: Object
    Beschreibung: Der Eintrag, der den Fokus erhalten hat.

Codebeispiel:

Initialisieren Sie das Autocomplete mit dem angegebenen focus-Callback:

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompletefocus-Ereignis:

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object

Hinweis:uiDas Objekt ist leer; es ist zur Konsistenz mit anderen Ereignissen enthalten.

Codebeispiel:

Initialisieren Sie das Autocomplete mit dem angegebenen open-Callback:

$( ".selector" ).autocomplete({
  open: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompleteopen-Ereignis:

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object
  • content
    Typ: Array
    Beschreibung: Enthält die Antwortdaten und kann geändert werden, um die angezeigten Ergebnisse zu ändern. Diese Daten sind bereits normalisiert. Wenn Sie die Daten ändern, stellen Sie sicher, dass jedes Element dievalueundlabelEigenschaft.

Codebeispiele:

Autocomplete mit dem angegebenen Response-Callback initialisieren:

$( ".selector" ).autocomplete({
  response: function( event, ui ) {}
});
    

Einen Ereignis-Listener an das autocompleteresponse-Ereignis binden:

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object

Hinweis:uiDas Objekt ist leer; es wird hier aus Gründen der Konsistenz mit anderen Ereignissen aufgeführt.

Codebeispiele:

Autocomplete mit dem angegebenen Search-Callback initialisieren:

$( ".selector" ).autocomplete({
  search: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompletesearch-Ereignis:

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );
    

• event
  Typ: Event
• ui
  Typ: Object
  • item
    Typ: Object
    Beschreibung: Ein Objekt mit denlabelundvalueEigenschaften des ausgewählten Elements.

Codebeispiele:

Initialisieren Sie autocomplete mit dem angegebenen select-Callback:

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das autocompleteselect-Ereignis:

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );