jquery autocompleter

Plug-in de preenchimento automático jQuery

Demonstração

Aqui: Exemplo com cores Crayola.

Uso

Instalação

npm:

npm install --save jquery-autocompleter

Fio:

yarn add jquery-autocompleter

Adicione plugin ao seu projeto

• inclua jQuery:

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

• inclua o código do plugin:

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

• chame o plug-in:

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

Exemplos

• url remoto

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

• simples

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

Opções

O preenchimento automático tem as seguintes opções:

Nome	Tipo	Descrição	Surdo
fonte	str, obj	URL para o servidor ou um objeto local	nulo
comoLocal	bool	Analisar resposta remota como fonte local	falso
vazio	bool	Iniciar se o valor estiver vazio	verdadeiro
limite	interno	Número de resultados a serem exibidos	10
comprimento mínimo	interno	Comprimento mínimo para preenchimento automático	0
atraso	interno	Alguns milissegundos para adiar a solicitação	0
classe personalizada	variedade	Matriz com classes personalizadas para elemento de preenchimento automático	[]
esconderijo	bool	Salve os dados xhr no localStorage para evitar a repetição de solicitações	verdadeiro
cacheExpira	interno	Vida útil dos dados localStorage em segundos (0 para desabilitar a expiração do cache)	86400
foco aberto	bool	Inicie o preenchimento automático quando a entrada receber foco	verdadeiro
entrarSelecionar	bool	Permite selecionar usando a tecla Enter	verdadeiro
dica	bool	Adicione dica à entrada com o primeiro rótulo correspondente; os estilos corretos devem ser instalados	falso
selecionePrimeiro	bool	Se definido como true , o primeiro elemento na lista de preenchimento automático será selecionado automaticamente, ignore se changeWhenSelect estiver ativado	falso
alterarQuandoSelecionar	bool	Permite alterar o valor de entrada usando as teclas de seta na lista de preenchimento automático	verdadeiro
destaqueCorrespondências	bool	Esta opção define a quebra da tag <strong> para correspondências nos resultados de preenchimento automático	falso
ignoradoKeyCode	variedade	Matriz com códigos-chave ignoráveis, por padrão: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
rótulo personalizado	str	O nome da propriedade do objeto que será usada como rótulo	falso
valor personalizado	str	O nome da propriedade do objeto que será usada como valor	falso
onBeforeSend	função	Esta função é acionada antes de uma solicitação ajax	$.noop
onBeforeShow	função	Esta função é acionada quando a lista está pronta para ser mostrada	$.noop
onVazio	função	Se a lista de dados estiver vazia, acione esta função	$.noop
onItem	função	Esta função é acionada quando cada item está sendo preparado para ser mostrado	$.noop
onListOpen	função	Esta função é acionada quando a lista é mostrada	$.noop
onListClose	função	Esta função é acionada quando a lista está oculta	$.noop
onBeforeLaunch	função	O evento foi acionado antes da nova solicitação (incluindo cache local)	$.noop
modelo	str	Modelo personalizado para itens de lista. Por exemplo: <span>{{ label }} is {{ customPropertyFromSource }}</span> . O modelo é anexado a .autocompleter-item .	falso
desvio	str	Deslocamento da resposta de origem, por exemplo: "response.items.posts" . @deprecated use format em vez disso	falso
formatar	função	Formatar carga útil de resposta para retornar dados de origem	nulo
combinar	função	Retorna um objeto que estende dados ajax. Útil se você quiser passar algumas opções adicionais de servidor	$.noop
ligar de volta	função	Selecione a função de retorno de chamada de valor. Argumentos: value , index , object	$.noop

Métodos

Alterar opção após o plugin ser definido

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

Por exemplo:

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

Lista aberta

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

Fechar lista

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

Destruir plugin

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

Limpe todo o cache

 $ . autocompleter ( "clearCache" ) ; 

Definir padrões

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

Mais um exemplo

Preenchimento automático para entrada do primeiro nome com cache, destaque de correspondência e limite de 5 resultados. A resposta remota depende do gênero:

Marcação de formulário

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

Marcação

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 >