AUTOCOMPLETE DO JQUERY - BUSCA POR TODA LETRA DIGITADA!

[Carlos Rocha]

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

Editado Setembro 30, 2015 por Carlos Rocha

[Carlos Rocha]

Olha quer coisa estranha ocorre:

fiz:

  this.input.on("keydown", function () {
        alert($("this.input").val());
   });
[/code]

O keydown ocorre dentro do campo. mas o alert diz que o campo é indefinido