javascript - Bootstrap 文本框 Dropbox 搜索

Question

我有一个 Bootstrap 模板，最近我在导航栏的顶部添加了一个文本框。我希望它在搜索内容时显示元素的下拉列表，所以喜欢它在键入时自动显示列表。自动显示，无需单击搜索并转到另一页或任何内容。有什么办法吗？

对于那些说“到目前为止你尝试过什么”的人，实际上什么都没有。由于没有任何东西可以帮助我，我花了几个小时试图得到答案，但没有成功。

Answer 1

你是说自动完成，比如TypeAhead？

https://twitter.github.io/typeahead.js/examples/

如演示所示，您只需使用它的类并调用脚本:

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

--

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)
});