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

POST для Twitter Typeahead

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

Честно говоря, движок ищейки не ясен для меня, и подробная информация о том, как манипулировать/доступ к объектам и массивам 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"

    }
  ]

Typeahead script

  <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>

Ответ 1

Я просто потратил несколько дней, пытаясь заставить это работать на себя, и я полностью согласен с тем, что он не интуитивно понятен. В частности, на странице с заголовком "Bloodhound" было что-то одно, и я попытался как-то просто не работать. Например, следующая строка:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') - всегда будет давать ошибку, потому что obj не существует.

Для datumTokenizer используйте следующую форму (где "DisplayText" - это имя свойства в вашем объекте, которое содержит текст, который будет отображаться):

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

и помните, когда вы создаете typeahead, установите displayKey в имя свойства в вашей коллекции, которое имеет текстовые данные, которые вы хотите отобразить. Для меня это всегда было то же самое, что и свойство, которое я хотел tokenize - поэтому мой оператор typeahead выглядел следующим образом:

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }

Ответ 1

Ответ 2