bootstrap 3 typeahead.js：我在哪里可以找到一个有效的示例代码？

时间：2014-02-27 22:18:26

标签： twitter-bootstrap-3 typeahead.js

enter image description here 我正在寻找一个有效的例子。我想使用它，但我找不到与bootstrap 3一起使用的代码段。我想在这里进行自动完成http://twitter.github.io/typeahead.js/examples/。如果你有一些链接，谢谢。

1 个答案:

答案 0 :(得分：1)

使用Bootstrap很难，因为TYPEAHEAD用于exp。：

全文

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <style>
            html {
              font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-size: 18px;
              line-height: 1.2;
              color: #333;
            }
            .tt-dropdown-menu{
              text-align: left;
            }
            .typeahead,
            .tt-query,
            .tt-hint {
              padding: 8px 12px;
              font-size: 24px;
              outline: none;
            }
            .typeahead {
              background-color: #fff;
            }
            .tt-query {
              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            }
            .tt-hint {
              color: #999
            }
            .tt-dropdown-menu {
              width: 422px;
              margin-top: 12px;
              padding: 8px 0;
              background-color: #fff;
              border: 1px solid #ccc;
              border: 1px solid rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 8px;
                 -moz-border-radius: 8px;
                      border-radius: 8px;
              -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
                 -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
                      box-shadow: 0 5px 10px rgba(0,0,0,.2);
            }
            .tt-suggestion {
              padding: 3px 20px;
              font-size: 18px;
              line-height: 24px;
            }
            .tt-suggestion.tt-cursor {
              color: #fff;
              background-color: #0097cf;
            }
            .tt-suggestion p {
              margin: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="countries"> <!-- This is a .countries in that examples.js -->
                <div class="demo">
                    <input class="typeahead form-control" type="text" placeholder="Countries" autocomplete="off" spellcheck="false" dir="auto" > <!-- This is a typehead class in that js-->
                    <input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; ">
                    <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
                    </pre>
                    <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                        <div class="tt-dataset-countries"></div>
                    </span>
                </div>
            </div>
            <script src="./typeahead.bundle.js"></script>
            <script src="./examples.js"></script>
        </div>
    </body>
</html>

在examples.js中是：

    $(document).ready(function() {
  var numbers;
var countries = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: {
    url: './countries.json',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  }
});

countries.initialize();

$('.countries .typeahead').typeahead(null, {
  name: 'countries',
  displayKey: 'name',
  source: countries.ttAdapter()
});

});

本地方式

    $(document).ready(function() {
    var numbers;
    var countries = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        local: [
            { name: 'Andorra' },
            { name: 'United Arab Emirates' },
            { name: 'Afghanistan'},
            { name: 'Antigua and Barbuda'},
            { name: 'Anguilla'},
        ]
    });

countries.initialize();

$('.countries .typeahead').typeahead(null, {
  displayKey: 'name',
  source: countries.ttAdapter()
});

});