2015-06-25 3 views
0

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

Мой 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" 
     } 
    ] 

EDIT: Так что если я правильно понимаю, мой код будет выглядеть это без вызова ajax? или я удаляю больше, чем должен?

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

});

ответ

0

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

+0

Я также возникли проблемы с JQuery UI, в документации является полная шутка. Специально для тех из нас, которые не очень знакомы с js и т. Д. Могу ли я спросить, вы находите, что jQuery AC мне проще настроить? Кроме того, это так же быстро и эффективно. –

+0

Я нашел, что это очень отзывчиво для моих нужд. Что касается легкости, то буквально одна строка вызывает мой код. – Zamerick

0

Вы правы, документация типа - это кошмар. Я нашел обходной путь, который работал для меня не используя 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, если вы хотите. (И рули)

Смежные вопросы