twitter bootstrap typeahead exemplo ajax

Eu estou tentando encontrar um exemplo de trabalho do elemento de boot do Twitter que fará uma chamada de ajax para preencher o dropdown.

Eu tenho um exemplo de autocomplete de jquery existente que define o URL do ajax e como processar a resposta

 //<![CDATA[ $(document).ready(function() { var options = { minChars:3, max:20 }; $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. 

O que eu preciso mudar para converter isso para o exemplo typeahead?

  //<![CDATA[ $(document).ready(function() { var options = { source:'/index/runnerfilter/format/html', items:5 }; $("#runnerquery").typeahead(options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. 

Vou esperar que o problema ” Incluir suporte de fonts remotas para tipeahead ” seja resolvido.

Edit: typeahead não é mais fornecido no Bootstrap 3. Confira:

  • Onde está o módulo JavaScript typeahead no Bootstrap 3 RC 1?
  • typeahead.js

A partir do Bootstrap 2.1.0 até o 2.3.2, você pode fazer isso:

 $('.typeahead').typeahead({ source: function (query, process) { return $.get('/typeahead', { query: query }, function (data) { return process(data.options); }); } }); 

Para consumir dados JSON assim:

 { "options": [ "Option 1", "Option 2", "Option 3", "Option 4", "Option 5" ] } 

Observe que os dados JSON devem ser do tipo mime correto (application / json), portanto, o jQuery o reconhece como JSON.

Você pode usar o fork BS Typeahead que suporta chamadas ajax. Então você poderá escrever:

 $('.typeahead').typeahead({ source: function (typeahead, query) { return $.get('/typeahead', { query: query }, function (data) { return typeahead.process(data); }); } }); 

A partir do Bootstrap 2.1.0:

HTML:

  

Javascript:

 $('.ajax-typeahead').typeahead({ source: function(query, process) { return $.ajax({ url: $(this)[0].$element[0].dataset.link, type: 'get', data: {query: query}, dataType: 'json', success: function(json) { return typeof json.options == 'undefined' ? false : process(json.options); } }); } }); 

Agora você pode criar um código unificado, colocando links “json-request” em seu código HTML.

Todas as respostas se referem ao tipo de header BootStrap 2, que não está mais presente no Bootstrap 3.

Para qualquer outra pessoa direcionada aqui procurando por um exemplo AJAX usando o novo typeahead.js pós-Bootstrap Twitter , aqui está um exemplo de trabalho. A syntax é um pouco diferente:

 $('#mytextquery').typeahead({ hint: true, highlight: true, minLength: 1 }, { limit: 12, async: true, source: function (query, processSync, processAsync) { processSync(['This suggestion appears immediately', 'This one too']); return $.ajax({ url: "/ajax/myfilter.php", type: 'GET', data: {query: query}, dataType: 'json', success: function (json) { // in this example, json is simply an array of strings return processAsync(json); } }); } }); 

Este exemplo usa a sugestão síncrona (chamada para processSync ) e assíncrona, portanto, você verá algumas opções aparecerem imediatamente e outras serão adicionadas. Você pode simplesmente usar um ou outro.

Há muitos events vinculáveis ​​e algumas opções muito poderosas, incluindo trabalhar com objects em vez de strings, em cujo caso você usaria sua própria function de exibição personalizada para renderizar seus itens como texto.

Eu aumentei o plugin Bootstrap tipeahead original com resources ajax. Muito fácil de usar:

 $("#ajax-typeahead").typeahead({ ajax: "/path/to/source" }); 

Aqui está o repository do github: Ajax-Typeahead

Eu fiz algumas modificações no jquery-ui.min.js:

 //Line 319 ORIG: this.menu=d("
    ").addClass("ui-autocomplete").appendTo(d(... // NEW: this.menu=d("
      ").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(... // Line 328 ORIG: this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr... // NEW:this.element.attr.... // Line 329 ORIG: this.active=a.eq(0).children("a") this.active.children("a") // NEW: this.active=a.eq(0).addClass("active").children("a") this.active.removeClass("active").children("a")`

      e adicione o seguinte css

       .dropdown-menu { max-width: 920px; } .ui-menu-item { cursor: pointer; } 

      Funciona perfeito.

      Pode-se fazer chamadas usando o Bootstrap. A versão atual não tem nenhum problema de atualização de fonte. Falha ao atualizar a fonte de dados typeahead do Bootstrap com post response , ou seja, a origem do bootstrap, uma vez atualizada, pode ser modificada novamente.

      Por favor, consulte abaixo para um exemplo:

       jQuery('#help').typeahead({ source : function(query, process) { jQuery.ajax({ url : "urltobefetched", type : 'GET', data : { "query" : query }, dataType : 'json', success : function(json) { process(json); } }); }, minLength : 1, }); 

      Para aqueles que procuram uma versão do café da resposta aceita:

       $(".typeahead").typeahead source: (query, process) -> $.get "/typeahead", query: query , (data) -> process data.options 

      Eu passei por este post e tudo não queria funcionar corretamente e, eventualmente, juntar os pedaços de algumas respostas, então eu tenho uma demo 100% de trabalho e colá-lo aqui para referência – cole isso em um arquivo php e certifique-se de include estão em O lugar certo.

       < ?php if (isset($_GET['typeahead'])){ die(json_encode(array('options' => array('like','spike','dike','ikelalcdass')))); } ?>      

      Estou usando este método

       $('.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'options', displayKey: 'value', source: function (query, process) { return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) { var matches = []; $.each(data, function(i, str) { matches.push({ value: str }); }); return process(matches); },'json'); } }); 

      UPDATE: eu modifiquei meu código usando este fork

      também em vez de usar $. cada eu mudei para $ .map como sugerido por Tomislav Markovski

       $('#manufacturer').typeahead({ source: function(typeahead, query){ $.ajax({ url: window.location.origin+"/bows/get_manufacturers.json", type: "POST", data: "", dataType: "JSON", async: false, success: function(results){ var manufacturers = new Array; $.map(results.data.manufacturers, function(data, item){ var group; group = { manufacturer_id: data.Manufacturer.id, manufacturer: data.Manufacturer.manufacturer }; manufacturers.push(group); }); typeahead.process(manufacturers); } }); }, property: 'name', items:11, onselect: function (obj) { } }); 

      No entanto, estou encontrando alguns problemas, obtendo

      Incorreto TypeError: Não é possível chamar o método ‘toLowerCase’ de undefined

      como você pode ver em um novo post que eu estou tentando descobrir aqui

      Espero que esta atualização seja de alguma ajuda para você …

      Tente isto se o seu serviço não estiver retornando o header correto do tipo de conteúdo do aplicativo / json:

       $('.typeahead').typeahead({ source: function (query, process) { return $.get('/typeahead', { query: query }, function (data) { var json = JSON.parse(data); // string to json return process(json.options); }); } }); 

      Eu não tenho um exemplo de trabalho para você nem tenho uma solução muito clara, mas deixe-me dizer o que eu encontrei.

      Se você olhar o código javascript para TypeAhead, ele se parece com isto:

       items = $.grep(this.source, function (item) { if (that.matcher(item)) return item }) 

      Esse código usa o método “grep” jQuery para corresponder a um elemento na matriz de origem. Eu não vi nenhum lugar que você pudesse ligar em uma chamada AJAX, então não há uma solução “limpa” para isso.

      No entanto, uma maneira um pouco hacky que você pode fazer isso é aproveitar a maneira como o método grep funciona no jQuery. O primeiro argumento para grep é a matriz de origem e o segundo argumento é uma function que é usada para corresponder à matriz de origem (observe que o Bootstrap chama o “correspondente” fornecido quando você o inicializou). O que você poderia fazer é definir a fonte para uma matriz fictícia de um elemento e definir o correspondente como uma function com uma chamada AJAX. Dessa forma, ele executará a chamada AJAX apenas uma vez (já que sua matriz de origem possui apenas um elemento).

      Essa solução não é apenas hacky, mas sofrerá problemas de desempenho, já que o código TypeAhead foi projetado para fazer uma consulta em cada pressionamento de tecla (as chamadas AJAX devem ocorrer apenas a cada poucas teclas ou após um certo tempo ocioso). Meu conselho é tentar, mas ficar com uma biblioteca de autocomplete diferente ou usar isso apenas para situações que não sejam do AJAX se você tiver algum problema.

      Ao usar ajax, tente $.getJSON() vez de $.get() se você tiver problemas com a exibição correta dos resultados.

      No meu caso eu tenho apenas o primeiro caractere de cada resultado quando eu usei $.get() , embora eu usei json_encode() no lado do servidor.

      Eu uso $().one() para resolver isso; Quando a página é carregada, envio o ajax para o servidor e aguardo a conclusão. Então passe o resultado para funcionar. $().one() é importante .Por que digite typehead.js para append à input uma vez. desculpe por escrever mal.

       (($) => { var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = []; $.ajax({ url: 'https://baconipsum.com/api/?type=meat-and-filler', type: 'get' }).done(function(data) { $('.typeahead').one().typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(data) }); }) })(jQuery); 
       .tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */ .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; border-radius: 8px; outline: none; } .tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999; } .tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */ width: 422px; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; cursor: pointer; } .tt-suggestion:hover { color: #f0f0f0; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 
          
        $('#runnerquery').typeahead({ source: function (query, result) { $.ajax({ url: "db.php", data: 'query=' + query, dataType: "json", type: "POST", success: function (data) { result($.map(data, function (item) { return item; })); } }); }, updater: function (item) { //selectedState = map[item].stateCode; // Here u can obtain the selected suggestion from the list alert(item); } }); //Db.php file < ?php $keyword = strval($_POST['query']); $search_param = "{$keyword}%"; $conn =new mysqli('localhost', 'root', '' , 'TableName'); $sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?"); $sql->bind_param("s",$search_param); $sql->execute(); $result = $sql->get_result(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $Resut[] = $row["name"]; } echo json_encode($Result); } $conn->close(); 

      ?>