Как использовать пример typehead?

Я хочу использовать этот пример, поэтому создайте следующую html-страницу:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/typeahead.bundle.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="the-basics">
    <input class="typeahead" type="text" placeholder="States of USA">
    </div> 
    <script type="text/javascript">
      var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
    // the typeahead jQuery plugin expects suggestions to a
    // JavaScript object, refer to typeahead docs for more info
    matches.push({ value: str });
    }
    });

    cb(matches);
    };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    $('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
    },
    {
    name: 'states',
    displayKey: 'value',
    source: substringMatcher(states)
    }); 
    </script>
  </body>
</html>

И загрузите весь связанный файл typeahead.bundle.min.js из здесь и другие с официального сайта начальной загрузки. но я получил следующие ошибки

Uncaught TypeError: Cannot read property 'isArray' of undefined
Uncaught TypeError: undefined is not a function

Не могли бы вы помочь мне, как использовать этот пример?


person Daniyal    schedule 17.01.2015    source источник


Ответы (1)


Ваша проблема заключается в том, в каком порядке вы загружаете библиотеки JS.

Помещать

<script src="js/typeahead.bundle.js"></script>

либо после

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    

или после

<script src="js/bootstrap.min.js"></script>

В любом случае следует решить вашу проблему.

person U r s u s    schedule 17.01.2015
comment
Большое спасибо, не могли бы вы сказать мне, почему CSS не работает? На данный момент у меня есть простое текстовое поле, а не текстовое поле начальной загрузки. - person Daniyal; 17.01.2015
comment
Без проблем. Действительно ли файл bootstrap css находится в папке css вашего проекта? - person U r s u s; 17.01.2015
comment
Да, но в bootstrap.min.css нет класса typeahead. Я также пытаюсь скопировать класс typeahead из stackoverflow.com/questions/18059161/, но все еще не работает. Спасибо еще раз... - person Daniyal; 17.01.2015