Autocomplete do JQuery - Busca no banco em toda letra digitada!
30/09/2015
0
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
Posts
30/09/2015
Marcio Araujo
[url]https://www.devmedia.com.br/forum/como-fazer-autocomplete-puxando-do-banco-mysql/433945[/url]
30/09/2015
Carlos Rocha
30/09/2015
Marcio Araujo
ultima tentativa: [url]http://blog.idealmind.com.br/desenvolvimento-web/javascript/simple-autocomplete-jquery-plugin/[/url]
30/09/2015
Carlos Rocha
Parece que esse plugin foi modificado para utilização com selec's!
30/09/2015
Carlos Rocha
Parece que esse plugin foi modificado para utilização com selec's!
30/09/2015
Marcio Araujo
30/09/2015
Carlos Rocha
Gostaria de achar a parte do código que ajunta cada um digito já digitado e vai autocompletando com as combinações.
30/09/2015
Marcio Araujo
[url]https://jqueryui.com/autocomplete/[/url]
30/09/2015
Carlos Rocha
No que estou usando, os inputs são criados dinamicamente e não consigo achar onde e nem onde ocorre o autocomplete!
30/09/2015
Marcio Araujo
30/09/2015
Carlos Rocha
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
01/10/2015
Carlos Rocha
fiz:
this.input.on("keydown", function () { alert($("this.input").val()); });
O keydown ocorre dentro do campo. mas o alert diz que o campo é indefinido
01/10/2015
William
01/10/2015
Carlos Rocha
01/10/2015
William
http://api.jqueryui.com/autocomplete/
Clique aqui para fazer login e interagir na Comunidade :)