Cómo usar Typeahead.js 0.10 paso a paso / remote / prefetch / local

PUBLICAR para Twitter Typeahead

Llevo 2 días tratando de entender y tener una idea clara de cómo usar / administrar typeahead.js 0.10 para usar datos locales, remotos y recuperados.

Honestamente, el motor del sabueso no está claro para mí y la información detallada sobre cómo manipular / acceder a objetos y matrices json sigue siendo un signo de interrogación.

Puedo hacer que el ejemplo local funcione, pero cada vez que trato de usar la captación previa o las opciones remotas, y además de varios tics, no puedo hacer que funcione.

Mi objetivo con esta publicación no es solo obtener una respuesta a mi problema, sino encontrar a alguien que tenga el conocimiento completo del mismo y que pueda, de una manera muy simple, explicar paso a paso (con ejemplos / jsfiddles, incluidos ejemplos de json, para saber qué se analiza realmente) cómo funciona esto.

Creo que muchas personas están ansiosas por entenderlo y esta será una gran contribución (ya que existen otras publicaciones detalladas que conocemos).

Me imagino que esto es un trabajo duro.

Gracias de antemano por sus colaboradores.

Siguiendo la sugerencia a continuación. Mi simple ejemplo.

Archivo JSON

   [
    {   "name": "Pink Floyd",
        "Album": "The Best Of Pink Floyd: A Foot In The Door",
        "Label": "EMI UK",
        "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
        "Price": "16.40",
        "Genre": "Rock"

    },
    {
        "name": "Depeche Mode",
        "Album": "A Question Of Time",
        "Label": "Mute",
        "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
        "Price": "4.68" ,
        "Genre": "Rock"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

Script de escritura anticipada

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>

Respuestas a la pregunta(3)

Su respuesta a la pregunta