twitter bootstrap typeahead ajax exemplo

Estou tentando encontrar um exemplo de trabalho do elemento de digitação de inicialização do twitter que fará uma chamada ajax para preencher sua lista suspensa.

Eu tenho um exemplo de preenchimento automático de jquery de trabalho existente que define o URL do ajax e como processar a resposta

<script type="text/javascript">
//<![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 preciso alterar para convertê-lo no exemplo do typeahead?

<script type="text/javascript">
//<![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 aguardar a solução do problema ' Adicionar suporte a fontes remotas para digitação antecipada '.

Edit: typeahead não está mais incluído no Bootstrap 3. Confira:

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

Desde o Bootstrap 2.1.0 até a 2.3.2, você pode fazer o seguinte:

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

Para consumir dados JSON como este:

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

Observe que os dados JSON devem ser do tipo MIME correto (application / json) para que o jQuery o reconheça como JSON.

Você pode usar o garfo BS Typeahead que suporta chamadas ajax. Então você será capaz de 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:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

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 os links "json-request" no seu código HTML.

Todas as respostas se referem ao cabeçalho inicial do BootStrap 2, que não está mais presente no BootStrap 3.

Para qualquer pessoa direcionada aqui procurando um exemplo de AJAX usando o novo typeahead.js do Twitter pós-Bootstrap , aqui está um exemplo de trabalho. A sintaxe é 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 sugestões síncronas (a chamada para processSync ) e assíncronas; portanto, algumas opções são exibidas imediatamente e outras são adicionadas. Você pode apenas usar um ou outro.

Existem muitos eventos vinculáveis ​​e algumas opções muito poderosas, incluindo o trabalho com objetos em vez de seqüências de caracteres. Nesse caso, você usaria sua própria função de exibição personalizada para renderizar seus itens como texto.

Aumentei o plug-in Bootstrap original, com recursos de ajax. Muito fácil de usar:

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

Aqui está o repositório do github: Ajax-Typeahead

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

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").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.

Eu estou usando esse 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');
    }
});

Pode-se fazer chamadas usando o Bootstrap. A versão atual não apresenta nenhum problema de atualização da fonte. Problema ao atualizar a fonte de dados do tipo bootstrap com resposta posterior , ou seja, a fonte do bootstrap depois de atualizada pode ser modificada novamente.

Consulte abaixo 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 com 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, reuni os bits com algumas respostas, então eu tenho uma demonstração 100% funcional e a colo aqui para referência - cole-a em um arquivo php e verifique se as inclusões estão incluídas O lugar certo.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Tente isso se o seu serviço não estiver retornando o cabeçalho correto do aplicativo / tipo de conteúdo 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);
        });
    }
});

UPDATE: modifiquei meu código usando este fork

também, em vez de usar $ .each, 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

TypeError não detectado: não é possível chamar o método 'toLowerCase' de undefined

como você pode ver em um post mais recente, estou tentando descobrir aqui

espero que esta atualização seja de alguma ajuda para você ...

Não tenho um exemplo prático para você nem uma solução muito limpa, mas deixe-me contar o que encontrei.

Se você olhar para o código javascript para TypeAhead, ele será assim:

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

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

No entanto, uma maneira um tanto hacky que você pode fazer isso é tirar proveito da maneira como o método grep funciona no jQuery. O primeiro argumento para grep é a matriz de origem e o segundo argumento é uma função usada para corresponder à matriz de origem (observe que o Bootstrap chama o "correspondente" que você forneceu ao inicializá-lo). O que você pode fazer é definir a origem para uma matriz fictícia de um elemento e definir o correspondente como uma função 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á com problemas de desempenho, pois o código TypeAhead foi projetado para fazer uma pesquisa a cada pressionamento de tecla (as chamadas AJAX devem realmente acontecer apenas a cada pressionamento de tecla ou após um certo tempo ocioso). Meu conselho é experimentá-lo, mas use uma biblioteca de preenchimento automático diferente ou use-a apenas para situações que não sejam do AJAX se você tiver algum problema.

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

No meu caso, obtive apenas o primeiro caractere de cada resultado quando usei $.get(), embora 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. Depois passe o resultado para a função. $().one()é importante. Porque force typehead.js a anexar à entrada 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

 $('#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();

?>