Autocomplete do JQuery - Busca no banco em toda letra digitada!

30/09/2015

0

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

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

Carlos Rocha

Responder

Posts

30/09/2015

Marcio Araujo

Boa tarde Carlos Rocha, ainda não conheço bem o JQuery, existe um post com praticamente sua mesma duvida.

[url]https://www.devmedia.com.br/forum/como-fazer-autocomplete-puxando-do-banco-mysql/433945[/url]
Responder

30/09/2015

Carlos Rocha

Boa tarde! Já tinha visto este post Mas ele também não informa onde ocorre o autocomplete letra por letra digitada!
Responder

30/09/2015

Marcio Araujo

Desculpa, como disse não conheço bem o JQuery.
ultima tentativa: [url]http://blog.idealmind.com.br/desenvolvimento-web/javascript/simple-autocomplete-jquery-plugin/[/url]
Responder

30/09/2015

Carlos Rocha

Não tem essa informação lá!

Parece que esse plugin foi modificado para utilização com selec's!
Responder

30/09/2015

Carlos Rocha

Não tem essa informação lá!

Parece que esse plugin foi modificado para utilização com selec's!
Responder

30/09/2015

Marcio Araujo

Então peço desculpas por não poder te ajudar mais, nem na documentação do JQuery tem essa informação?
Responder

30/09/2015

Carlos Rocha

Mexer no plugin em si não mexi. Mas acho que deve ser uma das configurações (interfaces) do script que postei na pergunta. Testei todas mas não achei!

Gostaria de achar a parte do código que ajunta cada um digito já digitado e vai autocompletando com as combinações.
Responder

30/09/2015

Marcio Araujo

Mais um link para analise.

[url]https://jqueryui.com/autocomplete/[/url]
Responder

30/09/2015

Carlos Rocha

Marcio, esse ai autocompleta um type["text"] existente. Não é o mesmo não!

No que estou usando, os inputs são criados dinamicamente e não consigo achar onde e nem onde ocorre o autocomplete!
Responder

30/09/2015

Marcio Araujo

Ahh, pensei que esse ultimo fosse o mais certo para o seu problema, vamos aguardar alguem com experiencia no JQuery. Abraço.
Responder

30/09/2015

Carlos Rocha

Esse ai foi bem fácil para entender.

Diferente desse meu$ que é preciso ter uma Select Option.

Se a Select Option aceitasse digitação na caixa de texto dela. mas quando clicka lá abre a combo. Aff! Saudades do Delphi!

Olha o caso desse que funciona normal:

$(document).ready(function(){
	  var source = [{
	  label: "Tom Smith",
	  value: "1234"
  }, {
	  label: "Tommy Smith",
	  value: "12321"
  }];
  
  $("#descricao").autocomplete({
	  source: source,
	  minLength: 3, //quantidade de caracteres para começar a buscar
	  select: function (event, ui) {
		  //evento de quando você seleciona uma opções        
		  $("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
		  $("#id").val(ui.item.value); //seto o id para ir para seu backend :D
		  event.preventDefault();
	  }
  });  
});

html
<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Text</title>
      
      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
      
      <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>      
      <script src="jqueryChamada.js"></script>
      
  </head>
  <body>
  
  <input type="text" id="descricao" />
  <input type="hidden" name="id" id="id" />
  
  </body>
</html>

Lugar algum pego o evento da digitação
Responder

01/10/2015

Carlos Rocha

Olha quer coisa estranha ocorre:

fiz:

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


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

01/10/2015

William

Carlos dá uma olha nesse exemplo do meu blog http://www.devwilliam.com.br/php/autocomplete-com-jquery-ui-php-mysql
Responder

01/10/2015

Carlos Rocha

Oi William, valeu. Mas não consegui encontrar o evento keyUp nem como capturar o que esta escrito na caixa de texto. É isso que eu preciso. Do texto que foi digitado na caixa de texto.
Responder

01/10/2015

William

Na documentação oficial desse plugin jQuery UI, existem alguns eventos relacionados ao componente que podem lhe ajudar, cito principalmente "search" e "change":
http://api.jqueryui.com/autocomplete/
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar