Pesquisar na Comunidade
Mostrando resultados para as tags ''twitter-typeahead''.
Encontrado 1 registro
-
ajax Como popular um campo input text com Twitter Typeahead baseando-se no valor selecionado em uma combobox?
michelmir postou um tópico no fórum Javascript
Olá! Eu tenho um campo input text que carrega corretamente dados utilizando o Twitter-Typeahead. No caso, também possuo uma caixa de seleção e eu gostaria que quando selecionar um valor nesta caixa, o campo input text fosse preenchido com dados relacionados com o número ID da opção selecionada em questão. Por exemplo, se dentro da minha caixa de seleção (categorias) conter a opção "Calçados" e a mesma for selecionada, o campo input text com twitter-typeahead fosse preenchido automaticamente com as opções relacionadas a opção selecionada "calçados" onde essas opções (ex.: "Nike", "Adidas", "Puma") fossem aparecendo a medida que fosse digitando na caixa input text com twitter-typeahead. Abaixo, segue o código que estou utilizando para tentar montar essa solução. No código abaixo contém 2 campos um select box com as categorias e carregado com php e um campo input text que carrega dados utilizando o Twitter-TypeAhead: <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <!-- CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the category data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- category dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">Selecione a categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4"> <input type="text" name="produtos" id="produtos" class="form-control input-lg" autocomplete="off" placeholder="" /> </div> </div> </div> </body> </html> Abaixo segue o script Ajax que chama o script php para popular o input text: <script> $(document).ready(function(){ $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); if(queryID){ $('#produtos').typeahead({ source: function(query, result) { $.ajax({ url:"fetch.php", method:"POST", data: 'query='+queryID, dataType:"json", success:function(data) { result($.map(data, function(item){ return item; })); } }) } }); } }); }); </script> E por fim, o código php que tem como função enviar o resultado da query para o Ajax: <?php //fetch.php include 'dbConfig.php'; if(!empty($_POST["query"])){ $request = mysqli_real_escape_string($db, $_POST["query"]); $query = " SELECT * FROM produtos WHERE nomeProduto LIKE '%".$request."%' AND categoriaFK = ".$_POST["query"]." "; $result = $db->query($query); $data = array(); if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $data[] = $row["nomeProduto"]; } echo json_encode($data); } } ?> Como podem observar no código acima, estou tentando utilizar o Ajax para preencher o input text conforme o valor selecionado na caixa de seleção. No caso como posso acertar o código php e o script Ajax para montar essa solução? É possível? Desde já agradeço.