Bootstrap Typeahead

2018-03-22 16:48 更新

有本地数据集的Typeahead

以下示例将向你展示如何使用本地数据集创建typeahead。

为输入框设置autocomplete=“off”，以防止默认浏览器菜单显示在Bootstrap type-ahead下拉列表中。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input.typeahead").typeahead({
    name: "accounts",
    local: ["Audi", "BMW", "Bugatti", "Ferrari" ]
  });
});  
</script>
<style type="text/css">
.bs-example{
  position: relative;
  margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
  border: 2px solid #CCCCCC;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 8px 12px;
  width: 396px;
}
.typeahead {
  background-color: #FFFFFF;
}
.typeahead:focus {
  border: 2px solid #0097CF;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}
.tt-suggestion {
  font-size: 24px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
</style>
</head>
<body>
    <div class="bs-example">
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>

外部数据集

我们可以通过一个URL指定外部数据集指向包含数据数组的JSON文件。

<script type="text/javascript">
$(document).ready(function(){
    $("input.typeahead").typeahead({
        name: "countries",
        prefetch: "../data/yourData.json",
        limit: 10
    });
});  
</script>

以上内容是否对您有帮助：

Bootstrap Typeahead

有本地数据集的Typeahead

外部数据集

推荐文章

推荐教程

推荐课程