Раскрывающийся список Typehead.js не отображается - PullRequest
Новая
       30

Раскрывающийся список Typehead.js не отображается

2 голосов
/ 04 апреля 2019

Я пытался заставить библиотеку typehead.js работать с выпадающим списком, который какое-то время извлекается из базы данных mysql, но он не работает. Сначала я решил попробовать основы и попытался заполнить раскрывающийся список из простого массива вместо базы данных, как показано в примерах документов typehead.js .

Я создал этот кодекс, но я не смог заставить работать там и выпадающий список.

Я скопировал библиотеку typehead.js в раздел JS codepen. Вот мой HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Typehead</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<style>
    .typeahead { z-index: 1051; }
</style>
  </head>

  <body>

    <div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

    <script>
    var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // 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)) {
        matches.push(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',
  source: substringMatcher(states)
});

  </script> 
  </body>

Раскрывающийся список вообще не отображается.

1 Ответ

2 голосов
/ 04 апреля 2019

Похоже, что сценарий копирования-вставки был сломан в вашем случае. Просто импортируйте его из CDN вот так 

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">
</script>

Оформить заказ codepen

...