Как использовать Typeahead.js 0.10 пошагово / удаленно / prefetch / local

ПОСТ для Твиттера Typeahead

Я был в течение 2 дней, пытаясь понять и получить четкое представление о том, как использовать / управлять typeahead.js 0.10 для использования локальных, удаленных и извлеченных данных.

Честно говоря, движок Bloodhound неясен для меня, и подробная информация о том, как манипулировать / получать доступ к объектам и массивам json, все еще остается под вопросом.

Я могу заставить локальный пример работать, но каждый раз, когда я пытаюсь использовать опции предварительной выборки или удаленного доступа, и, кроме нескольких тиков, я не могу заставить работать.

Моя цель в этом посте - не просто получить ответ на мою проблему, но найти кого-то, кто знает об этом полностью и который может очень просто объяснить шаг за шагом (с примерами / jsfiddles - включая json примеры, чтобы знать, что на самом деле анализируется) как это работает.

Я думаю, что многие с нетерпением ждут, чтобы понять это, и это будет большой вклад (как и другие подробные сообщения, которые мы знаем, существуют).

Я представляю, что это тяжелая работа.

Заранее спасибо за ваши вкладчики.

Следуя предложению ниже. Мой простой пример.

Файл 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>

  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>

Ответы на вопрос(3)

Ваш ответ на вопрос