Jump to content

Search the Community

Showing results for tags 'typeahead'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 2 results

  1. Olá! Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery. Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo: Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão. Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados: Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto: HTML <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <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> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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 country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona 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" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html> No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" : $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); }); Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax: <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. Como posso proceder? Desde já agradeço a atenção de todos.
  2. avallon-azevedo

    Autocomplete com plugin JS e JSON

    Bom dia amigos programadores, espero que estejam todos bem. Preciso de uma ajuda urgente para criar um sistema de autocomplete para um projeto que estou fazendo. Funciona assim: é um sistema de busca de passagens aéreas, no estilo decolar.com . Mas um pouco mais simples. O usuário começa a digitar o local que quer de origem, aí aparece o sistema de autocomplete. Esse sistema de autocomplete está sendo feito com o plugin jQuery typeahead (https://twitter.github.io/typeahead.js/). E os locais estão sendo puxados de um json (que vou por logo abaixo). Quando o usuário clica no local que ele escolher, existe dois campos do tipo hidden, um para o slug do local e outro para o ID do local, todos puxados do json. Assim, quando o usuário clica, automaticamente o formulário preenche os dois campos abaixo. O mesmo acontece quando o usuário preenche o o local de volta - funciona exatamente do mesmo jeito. O formulário passa as informações via GET. Segue os códigos: <form method="GET" id="homeSearch" data-base-action="/es/buscar/city_1876/city_1794/" novalidate="novalidate"> <ul class="lp-holder-fields"> <li class="lp-column full"> <label class="lb-form" for="originPlace">Origen:</label> <input id=" " name="searchBox[originPlace]" placeholder="Seleccione su origen" type="text" tabindex="1" autocomplete="off" class="input_lup searchInput" value=""> <input id="originPlaceId" type="hidden" value=""> <input id="originPlaceSlug" type="hidden" value=""> </li> <li class="lp-column full"> <label class="lb-form" for="destinationPlace">Destino:</label> <input id="destinationPlace" name="searchBox[destinationPlace]" placeholder="Seleccione su destino" type="text" tabindex="2" class="input_lup searchInput" autocomplete="off" value=""> <input id="destinationPlaceId" type="hidden" value=""> <input id="destinationPlaceSlug" type="hidden" value=""> </li> <li class="lp-column full"> <label class="lb-form" for="departureDate">Salida:</label> <input type="text" placeholder="Fecha de ida" id="departureDate" name="searchBox[departureDate]" class="datepicker input_date searchInput fixIE_searchDepartureHome" tabindex="3" autocomplete="off" value=""> <input type="hidden" id="departureDateHdn" name="ida" value=""> </li> <li class="lp-column full"> <label class="lb-form" for="returnDate">Regreso <small>(opcional)</small>:</label> <input type="text" placeholder="Opcional" id="returnDate" name="searchBox[returnDate]" class="datepicker input_date searchInput" tabindex="4" autocomplete="off" value=""> <input type="hidden" id="returnDateHdn" name="volta" value=""> </li> <li> <button tabindex="5" id="btn-search" class="search_tickets"><span class="i_search"></span><span>Buscar Boletos</span></button> </li> </ul> </form> Esse é o formulário (o projeto é em espanhol). Eu tenho o input "originPlace", que é onde o usuário preenche o local de origem e terá o autocomplete. Logo abaixo tem os dois inputs hidden que puxarão o slug e o ID desse local que o usuário escolher. O mesmo vale para o input "destinationPlace". Os outros inputs são para escolher data e, no momento, está tudo certo. Segue o código javaScript junto com o JSON. $(function() { try { $.datepicker.setDefaults($.datepicker.regional['es']); } catch (e) {} var originsSlugs = []; var $originPlace = $('#originPlace'); var $destinationPlace = $('#destinationPlace'); var placeListByName = [{ "name": "Terminal,\x20Abasolo,\x20GTO", "slug": "abasolo\x2Dgto", "id": 5000, "isGroup": "" }, { "name": "Aeropuerto,\x20Guadalajara,\x20JAL", "slug": "aeropuerto\x2Dguadalajara\x2Djal", "id": 5001, "isGroup": "" }, { "name": "Aeropuerto\x20terminal\x201,\x20Ciudad\x20de\x20M\u00E9xico,\x20DF", "slug": "aeropuerto\x2Dmexico\x2Dterminal\x2D1\x2Dciudad\x2Dde\x2Dmexico\x2Ddf", "id": 5003, "isGroup": "" }, { "name": "Aeropuerto\x20terminal\x202,\x20Ciudad\x20de\x20M\u00E9xico,\x20DF", "slug": "aeropuerto\x2Dmexico\x2Dterminal\x2D2\x2Dciudad\x2Dde\x2Dmexico\x2Ddf", "id": 5004, "isGroup": "" }, { "name": "Terminal,\x20Aguascalientes,\x20AGS", "slug": "aguascalientes\x2Dags", "id": 5005, "isGroup": "" }, { "name": "Terminal,\x20Ahuacatl\u00E1n\x20de\x20Guadalupe,\x20QRO", "slug": "ahuacatlan\x2Dde\x2Dguadalupe\x2Dqro", "id": 5006, "isGroup": "" },]; var hashTable = {}; var orderedPlaceList = {}; for (var x = 0; x < placeListByName.length; x++) { orderedPlaceList[x] = placeListByName[x].name; hashTable[placeListByName[x].name] = placeListByName[x]; } var originPlaceNames = _.uniq(_.flatten(_.values(orderedPlaceList))) try { var originPlaceSlug = $.trim($('#originPlaceSlug').val()), destinationPlaceSlug = $.trim($('#destinationPlaceSlug').val()); if (originPlaceSlug) { var originPlaceSlugEntity = _.findWhere(placeListByName, { slug: originPlaceSlug }); if (!originPlaceSlugEntity) { $('#originPlace').val(''); $('#originPlaceId').val(''); $('#originPlaceSlug').val(''); } } if (destinationPlaceSlug) { var destinationPlaceSlugEntity = _.findWhere(placeListByName, { slug: destinationPlaceSlug }); if (!destinationPlaceSlugEntity) { $('#destinationPlace').val(''); $('#destinationPlaceId').val(''); $('#destinationPlaceSlug').val(''); } } } catch (e) {} var typeaheadSorter = function(items) { var originalPlaces = _.map(items, function(item) { return hashTable[item]; }); var orderedItemsByIsGroup = _.sortBy(originalPlaces, function(originPlace) { return originPlace.isGroup === '' ? 1 : 0; }); return _.pluck(orderedItemsByIsGroup, 'name'); } $originPlace.typeahead({ source: originPlaceNames, matcher: function(item) { var cleanItem = removeDiacritics(item).toLowerCase(); var cleanQuery = removeDiacritics(this.query).toLowerCase(); var result = (cleanItem.indexOf(cleanQuery) === 0 || cleanItem.search(cleanQuery) >= 0); return result; }, updater: function(item) { var city = null; if ($.trim(item) !== '') { city = _.findWhere(placeListByName, { name: item }); } if (city) { $('#originPlaceId').val(city.id); $('#originPlaceSlug').val(city.slug); } else { $('#originPlaceId').val(0); $('#originPlaceSlug').val(''); $(this).val(''); } return item; }, sorter: typeaheadSorter }); $destinationPlace.typeahead({ source: originPlaceNames, matcher: function(item) { var cleanItem = removeDiacritics(item).toLowerCase(); var cleanQuery = removeDiacritics(this.query).toLowerCase(); var result = (cleanItem.indexOf(cleanQuery) === 0 || cleanItem.search(cleanQuery) >= 0); return result; }, updater: function(item) { var city = null; if ($.trim(item) !== '') { city = _.findWhere(placeListByName, { name: item }); } if (city) { $('#destinationPlaceId').val(city.id); $('#destinationPlaceSlug').val(city.slug); } else { $('#destinationPlaceId').val(0); $('#destinationPlaceSlug').val(''); $(this).val(''); } return item; }, sorter: typeaheadSorter, header: "teste" }); var getDestinations = function(city) { if (window.isAutoCompleteEnabled) { var adjacencylist = $.ajax({ url: "/es/adjacencylistplace", method: "GET", data: { "parameter": "departure", "placeId": city.id }, dataType: "json" }); adjacencylist.done(destinationList); } }; var originPlaceHandler = function() { var $this = $(this); var resultOriginPlaceName = $this.val(); if (!resultOriginPlaceName) { return false; } var city = null; if ($.trim(resultOriginPlaceName) !== '') { city = _.findWhere(placeListByName, { name: resultOriginPlaceName }); } if (city) { if (city.isGroup == "1") { $('#isGroup').val(0); } $('#originPlaceId').val(city.id); $('#originPlaceSlug').val(city.slug); getDestinations(city); } else { $('#originPlaceId').val(0); $('#originPlaceSlug').val(''); $(this).val(''); } }; var destinationList = function(ids) { var routesList; routesList = routesToPlacesList(ids).sort(); $destinationPlace.typeahead().data('typeahead').source = routesList; }; var routesToPlacesList = function(routesList) { var placesList, placeListId; placeListId = _.indexBy(placeListByName, 'id'); placesList = _.map(routesList, function(route) { if (typeof placeListId[route.arrival] !== 'undefined') { return placeListId[route.arrival].name; } }); originsSlugs = _.map(routesList, function(route) { return { "departure_slug": route.departure_slug, "id": route.arrival }; }); return placesList; }; $originPlace.bind('blur', originPlaceHandler); $destinationPlace.bind('blur', function() { var cityName = $(this).val(), city = null; if (cityName !== '') { city = _.findWhere(placeListByName, { name: cityName }); } if (city) { if (window.isAutoCompleteEnabled) { var slugGroup = _.findWhere(originsSlugs, { id: city.id }); if ($('#originPlaceSlug').val() != slugGroup.departure_slug) { $('#isGroup').val(1); } $('#originPlaceSlug').val(slugGroup.departure_slug); } if (city.isGroup == "1") { $('#isGroup').val(0); } $('#destinationPlaceId').val(city.id); $('#destinationPlaceSlug').val(city.slug); } else { $('#destinationPlaceId').val(0); $('#destinationPlaceSlug').val(''); $(this).val(''); } }); }); Logo no começo temos o json com as informações dos locais etc. Coloquei apenas alguns de exemplo para não estender tanto o código. Na parte de baixo temos o código que faz funcionar a passagens dos dados para o input hidden quando o usuário seleciona o local e também o código do autocomplete. No momento está funcionando perfeitamente - o problema é que eu preciso fazer uma alteração nesse código que não estou conseguindo. Eu preciso separar a exibição do autocomplete em dois - em Cidades (Ciudades) e Aeroportos (Aeropuertos). Lembrando que estou usando o plugin typeahead. Basicamente eu preciso fazer o mesmo que está nesse link (https://twitter.github.io/typeahead.js/examples/) lá na parte de "Multiple Datasets". O problema é que não consigo de jeito nenhum fazer isso funcionar. Já tentei vários exemplos e já estou desesperado. Alguém pode me ajudar, por favor? Agradeço de todo coração!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.