Проблема с Typeahead с Bootstrap

Я пытаюсь написать простой фрагмент кода для typeahead, используя bootstrap js. Ниже приведен фрагмент кода, который я написал, но typeahead не работает и не перечисляет предложения. Не могли бы вы предложить мне, если я что-то сделаю неправильно.Проблема с Typeahead с Bootstrap

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head> 
<body> 
<div class="well"> 
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" /> 
</div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script> 
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
    $('#search').typeahead({source: subjects}); 
</script> 
</body> 
</html>

источник

2015-01-09 Awanish

@dev он включен в источнике он обеспечил: 3.2.0 –

Проблема заключается в том, что вы используете Bootstrap 3.x.x, в котором typeahead был удален.

Вы можете использовать библиотеку Twitter typeahead.js. Существует хороший блог о нем (в конце концов, и о простой интеграции): https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

Update

Там также projexct на GitHub, которая обеспечивает назад машинописный в Bootstrap: https://github.com/bassjobsen/Bootstrap-3-Typeahead

Update 2

полный рабочий пример:

$(function(){ 
 
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
 
    $('#search').typeahead({source: subjects}); 
 
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="well"> 
 
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" /> 
 
</div> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="//rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>

источник

2015-01-09 08:27:12

Я скопировал код из https://raw.githubusercontent.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead. js в моей локальной папке скриптов и включил файл после bootstrap.min.js, как показано ниже Но я все еще вижу ту же проблему. Не уверен, что происходит не так. – Awanish

@Awanish Я почти уверен, что у вас есть проблема, включая скрипт из github (он не будет работать), а в консоли вы получили ошибку. Я добавил в свой ответ полный снайпер с рабочим кодом. Надеюсь, это поможет –

Спасибо, Гарат .. Это прекрасно работает. – Awanish

Bootstrap 3 оленья кожа у машинописный больше, получить его отдельно.

И фокус в том, - "процесс" функции обратного вызова ожидает, что результаты в формате:

[{значение: "строка1"}, {значение: "строка2"}, {значение: "string3" }]

, а не только массив строк, код ниже отлично работает с bootstrap3.

$('.typeahead').typeahead(
{ hint: true, highlight: true, minLength: 1 }, // options 
{ 
    source: function (query, process) { // source dataset, data = array of strings 
     $.getJSON('Home/Suggest', { query: query }, function (data) { 
      //data=["string1", "string2", "string3"] 
      //process callback function needs it 
      //in a format [{value: "string1"}, {value: "string2"}, {value: "string3"}] 
      var output = $.map(data, function (string) { return { value: string }; }); 
      process(output); 
     }); 
    } 
});

источник

2015-01-12 15:24:40 monstro

Проблема с Typeahead с Bootstrap

ответ

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