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

  • POST для Twitter

Я уже 2 дня пытаюсь понять и получить четкое представление о том, как использовать /manage 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>

javascript json twitter-typeahead
person Caramba    schedule 11.02.2014    source источник
comment
Мне не нравится ввод текста, поэтому попробуйте использовать brianreavis.github.io/selectize.js я думаю более легкая и богатая библиотека   -  person Farkhat Mikhalko    schedule 11.02.2014
comment
почему бы не показать, что вы пробовали?   -  person Will    schedule 11.02.2014
comment
Во-первых, измените ключ отображения с num на поле в вашей структуре, например, на имя. Второй. измените «предварительную выборку» на «удаленный». Не уверен, почему второе изменение работает для меня, но предварительная выборка не работает, когда я пытаюсь сделать это, как вы.   -  person crafter    schedule 17.03.2014
comment
Я должен согласиться с вами, что это не должно быть сложно заставить работать, но по большей части, за исключением самых простых примеров, это просто работает. Документация очень запутанная, возможно, слишком много предполагает, не объясняет области, требующие объяснения, и т. д. Я думаю, что проверю selectize.js.   -  person Mike Stephenson    schedule 05.04.2014

Ответы (3)


arrow_upward
14
arrow_downward

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

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

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

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

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

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

arrow_upward
3
arrow_downward

изменить на:

источник: products.ttAdapter()

person JeppePepp    schedule 15.05.2014

arrow_upward
1
arrow_downward

Принятый ответ, хотя и правильный в свое время, не очень полезен, учитывая, что typeahead 0.10 давно устарел. Текущая версия 1.2.1 (по состоянию на 2018 год).

Итак, отвечая на исходный вопрос,
вот справочное руководство, в котором есть пошаговое объяснение использования Typeahead с Bloodhound (локальная, предварительная выборка, удаленная и их комбинация) с скриптами JS на основе все еще поддерживаемой вилки — Typeahead v1.2.1

person Niket Pathak    schedule 24.05.2018