jquery autocompleter

jQuery Autocompleter-Plugin

Demo

Hier: Beispiel mit Crayola-Farben.

Verwendung

Installation

npm:

npm install --save jquery-autocompleter

Garn:

yarn add jquery-autocompleter

Fügen Sie Ihrem Projekt ein Plugin hinzu

• jQuery einbinden:

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• Fügen Sie den Code des Plugins ein:

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• Rufen Sie das Plugin auf:

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

Beispiele

• Remote-URL

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• schmucklos

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

Optionen

Autocompleter bietet die folgenden Optionen:

Name	Typ	Beschreibung	Gehörlos
Quelle	str, obj	URL zum Server oder einem lokalen Objekt	null
asLocal	bool	Analysieren Sie die Remote-Antwort als lokale Quelle	FALSCH
leer	bool	Starten, wenn der Wert leer ist	WAHR
Limit	int	Anzahl der anzuzeigenden Ergebnisse	10
minLänge	int	Mindestlänge für Autovervollständiger	0
Verzögerung	int	Wenige Millisekunden, um die Anfrage zu verzögern	0
benutzerdefinierteKlasse	Array	Array mit benutzerdefinierten Klassen für das Autocompleter-Element	[]
Cache	bool	Speichern Sie xhr-Daten in localStorage, um die Wiederholung von Anfragen zu vermeiden	WAHR
CacheExpires	int	Lebensdauer der localStorage-Daten in Sekunden (0, um den Cache-Ablauf zu deaktivieren)	86400
FokusÖffnen	bool	Starten Sie die Autovervollständigung, wenn die Eingabe den Fokus erhält	WAHR
EnterAuswählen	bool	Ermöglicht die Auswahl mit der Eingabetaste	WAHR
Hinweis	bool	Fügen Sie der Eingabe einen Hinweis mit der ersten übereinstimmenden Beschriftung hinzu. Die richtigen Stile sollten installiert sein	FALSCH
selectFirst	bool	Wenn auf true gesetzt, wird das erste Element in der Autovervollständigungsliste automatisch ausgewählt. Ignorieren Sie es, wenn „changeWhenSelect“ aktiviert ist	FALSCH
changeWhenSelect	bool	Ermöglicht das Ändern des Eingabewerts mithilfe der Navigation mit den Pfeiltasten in der Autovervollständigungsliste	WAHR
HighlightMatches	bool	Diese Option definiert <strong> Tag-Umbruch für Übereinstimmungen in Ergebnissen der automatischen Vervollständigung	FALSCH
ignorierter Schlüsselcode	Array	Array mit ignorierbaren Schlüsselcodes, standardmäßig: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
benutzerdefiniertesLabel	str	Der Name der Objekteigenschaft, die als Bezeichnung verwendet wird	FALSCH
benutzerdefinierter Wert	str	Der Name der Objekteigenschaft, die als Wert verwendet wird	FALSCH
onBeforeSend	Funktion	Diese Funktion wird vor einer Ajax-Anfrage ausgelöst	$.noop
onBeforeShow	Funktion	Diese Funktion wird ausgelöst, wenn die Liste zur Anzeige bereit ist	$.noop
onEmpty	Funktion	Wenn die Datenliste leer ist, lösen Sie diese Funktion aus	$.noop
onItem	Funktion	Diese Funktion wird ausgelöst, wenn jedes Element für die Anzeige vorbereitet wird	$.noop
onListOpen	Funktion	Diese Funktion wird ausgelöst, wenn die Liste angezeigt wird	$.noop
onListClose	Funktion	Diese Funktion wird ausgelöst, wenn die Liste ausgeblendet ist	$.noop
onBeforeLaunch	Funktion	Das Ereignis wurde vor der neuen Anfrage ausgelöst (einschließlich lokalem Cache)	$.noop
Vorlage	str	Benutzerdefinierte Vorlage für Listenelemente. Beispiel: <span>{{ label }} is {{ customPropertyFromSource }}</span> . Die Vorlage wird an .autocompleter-item angehängt.	FALSCH
versetzt	str	Quellantwort-Offset, zum Beispiel: "response.items.posts" . @deprecated stattdessen format verwenden	FALSCH
Format	Funktion	Formatieren Sie die Antwortnutzlast, um Quelldaten zurückzugeben	null
kombinieren	Funktion	Gibt ein Objekt zurück, das Ajax-Daten erweitert. Nützlich, wenn Sie einige zusätzliche Serveroptionen übergeben möchten	$.noop
Rückruf	Funktion	Wert-Callback-Funktion auswählen. Argumente: value , index , object	$.noop

Methoden

Option ändern, nachdem das Plugin definiert wurde

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

Zum Beispiel:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

Liste öffnen

 $ ( "#input" ) . autocompleter ( "open" ) ; 

Liste schließen

 $ ( "#input" ) . autocompleter ( "close" ) ; 

Plugin zerstören

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

Leeren Sie den gesamten Cache

 $ . autocompleter ( "clearCache" ) ; 

Standardwerte festlegen

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

Noch ein Beispiel

Autovervollständiger für die Eingabe des Vornamens mit Caching, Übereinstimmungshervorhebung und Beschränkung auf 5 Ergebnisse. Die Fernreaktion hängt vom Geschlecht ab:

Formular-Markup

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

Code

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

Markup

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >