Typeahead.js с тегами не увольняет удаленный запрос

Question

У меня есть веб-страница. На этой странице, я использую:

• Bootstrap 3,
• самозагрузки-tagsinput (0.8.0)
• bootstrap3-машинописный (V4.0.1)
• typeahead.js (0.11.1)

В моей веб-страницы, у меня есть следующие (Fiddle here):

<input id="MyChoices" class="form-control" type="text" placeholder="" // Initialize the tag piece 
$('#MyChoices').tagsinput({ 
    typeaheadjs: { 
    source: suggestions, 
    afterSelect: function() { 
     this.$element[0].value = ''; 
    } 
    } 
});autocomplete="off" spellcheck="false" value="" /> 
// Connect the lookup endpoint 
var suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    sufficient: 3, 
    remote: { 
    url: '/api/suggestions/find' 
    } 
}); 

По какой-то причине он никогда не запускает запрос на мой сервер, чтобы получить предложения. У меня открылся скрипач, и я не вижу ничего похожего, когда я ввожу вещи в текстовое поле. В то же время я не вижу ошибок JavaScript в окне консоли. По этой причине, похоже, что я что-то неправильно настроил. Тем не менее, все выглядит правильно.

Что я делаю неправильно?

Answer 1

Возможно, у вас возникла проблема с порядком скриптов.

Очень важно, чтобы браузер загружал файлы javascript.

// Connect the lookup endpoint 
 
var suggestions = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    sufficient: 3, 
 
    remote: { 
 
    url: '/api/suggestions/find' 
 
    } 
 
}); 
 

 
// Initialize the tag piece 
 
$('#MyChoices').tagsinput({ 
 
    typeaheadjs: { 
 
    source: suggestions, 
 
    afterSelect: function() { 
 
     this.$element[0].value = ''; 
 
    } 
 
    } 
 
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css"> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> 
 

 
<input id="MyChoices" class="form-control" type="text" placeholder="" autocomplete="off" spellcheck="false" value="" />

Обратите внимание, что код не будет делать ничего, но если вы будете проверять с хромированными разработчиками инструментами вы увидите запрос на /api/suggestions/find