Jump to content
Fórum Script Brasil
  • 0

AUTOCOMPLETE DO JQUERY - BUSCA POR TODA LETRA DIGITADA!


Carlos Rocha
 Share

Question

Olá.

Estou usando o plugin autocomplete do JQuery para autocompletar uma combobox.

Estou usando o código abaixo para que, ao selecionar uma opção na lista da combobox, seja feita uma busca po ajax no banco e popule o campo ${"#valorCombinado"}.

 

<!-- INICIO ENTREGA VALOR DO PLANO -->   
 $(function(){
 $(document).on("click", "li", function() {
     //Pega o id (value) do select atrelado à li escolhida
     planoEscolhido = $("#plano").val();
     //Pega o texto do select atrelado à li escolhida
     planoEscolhidoTexto = $("#plano option:selected").text();
      
     $.getJSON('planos.ajax.php?search=',{plano: planoEscolhido, ajax: 'true'}, function(resultado){
         novoValor = formataMoeda(resultado['valorPlano'],2, ',', '.');
         $('#valorCombinado').val(novoValor);
     });         
          
   });           
 });         
<!-- FINAL ENTREGA VALOR DO PLANO -->
[/code]

Agora gostaria de encontrar uma forma de a cada letra digitada, no momento em que o autocomplete acontece, se houver uma combinação do que foi digitado até o momento com alguma opção da comboboxo, também disparar o ajax para popular o ${"valorCombinado"}.

Porém, não encontro no plugin onde é que o autocoplete ocorre para eu colocar o ajax ali.

Podem me ajudar?

Esse é o plugin funcionando:

http://jsfiddle.net/swqwLfxu/40/

Qualquer coisa, segue todo o código abaixo:


(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( ":selected" ),
                value = selected.val() ? selected.text() : "";
 
            this.input = $( "<input>" )
                .appendTo( this.wrapper )
                .val( value )
                .attr( "title", "" )
                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: $.proxy( this, "_source" )
                })
                .tooltip({
                    tooltipClass: "ui-state-highlight"
                });
 
            this._on( this.input, {
                autocompleteselect: function( event, ui ) {
                    ui.item.option.selected = true;
                    this._trigger( "select", event, {
                        item: ui.item.option
                    });
                },
 
                autocompletechange: "_removeIfInvalid"
            });
        },
 
        _createShowAllButton: function() {
            var input = this.input,
                wasOpen = false;
 
            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Mostrar todos os Registros" )
                .tooltip()
                .appendTo( this.wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "custom-combobox-toggle ui-corner-right" )
                .mousedown(function() {
                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                })
                .click(function() {
                    input.focus();
 
                    // Close if already visible
                    if ( wasOpen ) {
                        return;
                    }
 
                    // Pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                });
        },
 
        _source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            response( this.element.children( "option" ).map(function() {
                var text = $( this ).text();
                if ( this.value && ( !request.term || matcher.test(text) ) )
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
            }) );
        },
 
        _removeIfInvalid: function( event, ui ) {
 
            // Selected an item, nothing to do
            if ( ui.item ) {
                return;
            }
 
            // Search for a match (case-insensitive)
            var value = this.input.val(),
                valueLowerCase = value.toLowerCase(),
                valid = false;
            this.element.children( "option" ).each(function() {
                if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                    this.selected = valid = true;
                    return false;
                }
            });
 
            // Found a match, nothing to do
            if ( valid ) {
                return;
            }
 
            // Remove invalid value
            this.input
                .val( "" )
                .attr( "title", value + " didn't match any item" )
                .tooltip( "open" );
            this.element.val( "" );
            this._delay(function() {
                this.input.tooltip( "close" ).attr( "title", "" );
            }, 2500 );
            this.input.autocomplete( "instance" ).term = "";
        },
 
        _destroy: function() {
            this.wrapper.remove();
            this.element.show();
        }
    });
})( jQuery );
 
$(function() {
    $( "#cliente" ).combobox();
    $( "#toggle" ).click(function() {
        $( "#cliente" ).toggle();
    });
 
    $( "#plano" ).combobox();
    $( "#toggle" ).click(function() {
        $( "#plano" ).toggle(); 
    });
 
});
  
 <!-- INICIO ENTREGA VALOR DO PLANO -->   
  $(function(){
  $(document).on("click", "li", function() {
      //Pega o id (value) do select atrelado à li escolhida
      planoEscolhido = $("#plano").val();
      //Pega o texto do select atrelado à li escolhida
      planoEscolhidoTexto = $("#plano option:selected").text();
       
      $.getJSON('planos.ajax.php?search=',{plano: planoEscolhido, ajax: 'true'}, function(resultado){
          novoValor = formataMoeda(resultado['valorPlano'],2, ',', '.');
          $('#valorCombinado').val(novoValor);
      });         
           
    });           
  });         
 <!-- FINAL ENTREGA VALOR DO PLANO -->

Edited by Carlos Rocha
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.1k
    • Total Posts
      647k
×
×
  • Create New...