jquery autocompleter

Complemento de autocompletado de jQuery

Manifestación

Aquí: Ejemplo con colores Crayola.

Uso

Instalación

npm:

npm install --save jquery-autocompleter

Hilo:

yarn add jquery-autocompleter

Añade complemento a tu proyecto

• incluir jQuery:

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

• incluir el código del complemento:

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

• llama al complemento:

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

Ejemplos

• URL remota

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

• plano

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

Opciones

Autocompletar tiene las siguientes opciones:

Nombre	Tipo	Descripción	sordo
fuente	cadena, obj	URL al servidor o a un objeto local	nulo
como local	booleano	Analizar la respuesta remota como fuente local	FALSO
vacío	booleano	Iniciar si el valor está vacío	verdadero
límite	entero	Número de resultados que se mostrarán	10
minLongitud	entero	Longitud mínima para el autocompletado	0
demora	entero	Unos milisegundos para aplazar la solicitud.	0
clase personalizada	formación	Matriz con clases personalizadas para elemento de autocompletar	[]
cache	booleano	Guarde los datos xhr en localStorage para evitar la repetición de solicitudes	verdadero
cachéExpira	entero	Duración de los datos de almacenamiento local en segundos (0 para deshabilitar la caducidad de la caché)	86400
focoAbrir	booleano	Inicie el autocompletado cuando la entrada reciba el foco	verdadero
entrarSeleccionar	booleano	Permite seleccionar mediante la tecla Intro.	verdadero
pista	booleano	Agregue una pista a la entrada con la primera etiqueta coincidente; se deben instalar los estilos correctos	FALSO
seleccionePrimero	booleano	Si se establece en true , el primer elemento en la lista de autocompletar se seleccionará automáticamente, ignórelo si changeWhenSelect está activado	FALSO
cambiarCuandoSeleccionar	booleano	Permite cambiar el valor de entrada usando las teclas de flecha de navegación en la lista de autocompletar	verdadero
resaltarPartidos	booleano	Esta opción define el ajuste de etiqueta <strong> para coincidencias en resultados de autocompletar.	FALSO
ignoradoKeyCode	formación	Matriz con códigos clave ignorables, por defecto: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
etiqueta personalizada	cadena	El nombre de la propiedad del objeto que se utilizará como etiqueta.	FALSO
valor personalizado	cadena	El nombre de la propiedad del objeto que se utilizará como valor.	FALSO
enAntes deEnviar	función	Esta función se activa antes de una solicitud ajax.	$.noop
enAntes deMostrar	función	Esta función se activa cuando la lista está lista para mostrarse.	$.noop
en vacío	función	Si la lista de datos está vacía, active esta función	$.noop
en el artículo	función	Esta función se activa cuando cada elemento se está preparando para ser mostrado.	$.noop
en lista abierta	función	Esta función se activa cuando se muestra la lista.	$.noop
enListaCerrar	función	Esta función se activa cuando la lista está oculta.	$.noop
enAntes del lanzamiento	función	El evento se activó antes de la nueva solicitud (incluido el caché local)	$.noop
plantilla	cadena	Plantilla personalizada para elementos de lista. Por ejemplo: <span>{{ label }} is {{ customPropertyFromSource }}</span> . La plantilla se agrega a .autocompleter-item .	FALSO
compensar	cadena	Compensación de respuesta de origen, por ejemplo: "response.items.posts" . @deprecated usa format en su lugar	FALSO
formato	función	Formatear la carga útil de respuesta para devolver datos de origen	nulo
combinar	función	Devuelve un objeto que extiende los datos ajax. Útil si desea pasar algunas opciones de servidor adicionales	$.noop
llamar de vuelta	función	Seleccione la función de devolución de llamada de valor. Argumentos: value , index , object	$.noop

Métodos

Cambiar la opción después de definir el complemento

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

Por ejemplo:

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

Lista abierta

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

Cerrar lista

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

Destruir complemento

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

Borrar todo el caché

 $ . autocompleter ( "clearCache" ) ; 

Establecer valores predeterminados

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

Un ejemplo más

Autocompletador para la entrada del nombre con almacenamiento en caché, resaltado de coincidencias y límite de 5 resultados. La respuesta remota depende del género:

marcado de formulario

 < 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 > 

Código

 $ ( 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 ) ;
    } ,
  } ) ;
} ) ; 

Margen

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 >