Введите вперед - проблемы со структурой json

Так что я боролся с изучением typeahead.js Twitter, и я должен сказать, что документация оставляет желать лучшего. Я пробовал около дюжины различных методов, которые я нашел опубликованными, для добавления функциональности опережения ввода к этому входу, и я в тупике. Что, если я что-то упустил в приведенном ниже коде? Я не вижу никаких ошибок в консоли, и idNums, кажется, содержит соответствующие данные, но я все еще не вижу правильного наложения.

Мой javascript:

    var idNums = new Bloodhound({
                    datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value);},
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'endpoint that returns below json',
                });

idNums.initialize();

    $('#prefetch .typeahead').typeahead({
                        hint: true,
                        highlight: true,
                        minLength: 1
                }, 
                {
                  name: 'BR_NUM',
                  displayKey: 'value',
                  source: idNums.ttAdapter(),
                });

Мой HTML:

<div id = "prefetch">
    <label>Value:  </label>
    <input  type = "text" name = "Value" class="typeahead" placeholder="ID Number"/>
</div>

Это мой файл json:

 [{
          "BR_NUM":"20512"
       },
       {  
          "BR_NUM":"22788"
       },
       {  
          "BR_NUM":"22789"
       },
       {  
          "BR_NUM":"22790"
       },
       {  
          "BR_NUM":"22791"
       },
       {  
          "BR_NUM":"22792"
       },
       {  
          "BR_NUM":"22793"
       },
       {  
          "BR_NUM":"22794"
       }
    ]

РЕДАКТИРОВАТЬ: Итак, если я правильно понимаю, мой код будет выглядеть так без вызова ajax? или я удаляю больше, чем должен?

$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2,
        limit: 8
    }, {
name: "main-search",
displayKey: "BR_NUM",
source: 'json url here'

});


javascript json typeahead.js typeahead twitter-typeahead
person Zamerick    schedule 25.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы правы, вводная документация — это кошмар. Я нашел обходной путь, который работал у меня без использования Bloodhound, примерно так:

var autoSuggestCallWorking, autosuggestCallTimeout;
$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 3,
    limit: 8
}, {
    name: "main-search",
    displayKey: "BR_NUM",
    templates: {
        suggestion: Handlebars.compile('{{BR_NUM}}')
    },
    source: function (q, cb) {
        if (autoSuggestCallWorking != null) {
            autoSuggestCallWorking.abort();
        }
        if (autosuggestCallTimeout) {
            clearTimeout(autosuggestCallTimeout);
        }
        autosuggestCallTimeout = setTimeout(function () {
            autoSuggestCallWorking = $.ajax({
                dataType: 'json',
                type: 'get',
                url: '/json_file.json',
                chache: false,
                success: function (data) {
                  // filter your json data with the 'q' parameter and return it as a callback
                  cb(data);
                },
                error: function (err) {
                  ...
                }
            });
        }, 600);

        return true;
    }
});

Это было сделано для запроса базы данных на стороне сервера, поэтому вы можете избавиться от вызова AJAX, если хотите. (и руль)

person isramartinez    schedule 25.06.2015

arrow_upward
0
arrow_downward

К сожалению, мне не удалось заставить шрифт работать на меня, и я остановился на автозаполнении jQuery ui.

person Zamerick    schedule 06.07.2015
comment
У меня тоже проблемы, документация - полная шутка. Особенно для тех из нас, кто не очень хорошо знаком с js и т. д. Могу ли я спросить, проще ли мне настроить jQuery AC? Также это так же быстро/эффективно. - person jonboy; 06.07.2015
comment
Я обнаружил, что это довольно отзывчиво для моих потребностей. Что касается простоты, это буквально однострочный вызов моего кода. - person Zamerick; 13.07.2015