Twitter Bootstrap Typeahead 使用教程

最新推荐文章于 2024-10-17 13:10:01 发布

戴岩均Valley

最新推荐文章于 2024-10-17 13:10:01 发布

阅读量569

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00536/article/details/141375676

版权

Twitter Bootstrap Typeahead 使用教程

twitter-bootstrap-typeaheadAn extension of Twitter's Bootstrap Typeahead plugin with additional customisation.项目地址:https://gitcode.com/gh_mirrors/tw/twitter-bootstrap-typeahead

项目介绍

Twitter Bootstrap Typeahead 是一个基于 jQuery 的自动完成插件，它最初是 Twitter Bootstrap 框架的一部分。这个插件允许用户在输入框中输入时，显示一个建议列表，帮助用户快速选择或输入内容。尽管 Twitter Bootstrap 已经移除了这个组件，但它仍然是一个独立且功能强大的工具，适用于需要自动完成功能的网页应用。

项目快速启动

安装

首先，你需要将 Twitter Bootstrap Typeahead 添加到你的项目中。你可以通过以下方式下载并引入：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Typeahead 插件 -->
<script src="path/to/typeahead.bundle.js"></script>

基本使用

以下是一个简单的示例，展示如何在输入框中使用 Typeahead 插件：

<input class="typeahead" type="text" placeholder="输入关键词...">

<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'];

  $('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'states',
    source: substringMatcher(states)
  });
</script>