Bootstrap Typeahead

2018-03-22 16:48 更新

有本地數(shù)據(jù)集的Typeahead

以下示例將向你展示如何使用本地數(shù)據(jù)集創(chuàng)建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>

外部數(shù)據(jù)集

我們可以通過一個URL指定外部數(shù)據(jù)集指向包含數(shù)據(jù)數(shù)組的JSON文件。

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

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號