Twitter Typeahead plugin Example

最新推荐文章于 2024-07-19 19:07:20 发布

EXLsunshine

最新推荐文章于 2024-07-19 19:07:20 发布

阅读量2.2k

点赞数

分类专栏： Html相关文章标签： js typeahead twitter

Html相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原文网址：
http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/

这个例子肯定能用，考到记事本里，然后另存为html，见证奇迹吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Using the Typeahead plugin with Twitter Bootstrap 2 and jQuery</title>
    <!-- http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/ -->
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    <style type="text/css">
        body {
            padding: 20px;
        }
    </style>
</head>
<body>
 
    <div class="container">
        <input type="search" id="city" name="city" placeholder="Type a city name" data-provide="typeahead" class="search-query" />
    </div>
 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            var alCities = ['Baltimore', 'Boston', 'New York', 'Tampa Bay', 'Toronto', 'Chicago', 'Cleveland', 'Detroit', 'Kansas City', 'Minnesota', 'Los Angeles', 'Oakland', 'Seattle', 'Texas'].sort();
            $('#city').typeahead({source: alCities, items:5});
        });
    </script>
 
</body>
</html>

EXLsunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Twitter Typeahead plugin Example

原文网址：http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/这个例子肯定能用，考到记事本里，然后另存为html，见证奇迹吧！ Using the Typeahead plugin with Twitter Bootstrap 2
复制链接

扫一扫

专栏目录