•  
     

"Busca Instantânea" - JSON, AJAX e JQUERY

Esse é um sistema bastante interessante, onde você digita o que deseja procurar e os resultados "pré estabelecidos" vão aparecendo instantaneamente.

Em alguns sites de filmes eles usam isso para você digitar o título e ele já aparecer. No seu fórum, você pode criar algo como uma busca instantânea por categorias, por exemplo.

Utilize este código como ponto de partida para o desenvolvimento de resultados mais bonitos.

DEMO

Código: Selecionar todos

<input id="searchterm" type="text" /> <button id="search">search</button>


Código: Selecionar todos


<script type="text/javascript">// <![CDATA[
      $("#searchterm").keyup(function(e){
        var q = $("#searchterm").val();
        $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
        {
          srsearch: q,
          action: "query",
          list: "search",
          format: "json"
        },
        function(data) {
          $("#results").empty();
          $("#results").append("
 
Results for <b>" + q + "</b>
 
");
          $.each(data.query.search, function(i,item){
            $("#results").append("
<div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a>" + item.snippet + "</div>
");
          });
        });
      });
 
// ]]></script>