首先参考这个页面http://www.bootcss.com/javascript.html#typeahead
我只是把里面最基本的东西抠出来了
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> </body> <div class="bs-docs-example" style="background-color: #f5f5f5;"> <input type="text" class="span3" style="margin: 0 auto;" autocomplete="off" data-provide="typeahead" data-items="4" data-source="["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 Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]"> </div> <script> $('.typeahead').typeahead(); </script> </html>
好了 其实这是个很没营养的例子 使用BootStrap呢 需要引用三个文件 一个是bootstrap.css
接着就是jQuery 再就是bootstrap.js
去这里下载吧http://www.bootcss.com/
或者引用这个(这下面没有包含CSS)
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-alert.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-scrollspy.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-typeahead.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-affix.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script> <script src="http://twitter.github.io/bootstrap/assets/js/application.js"></script>
之后呢 就这么用
<input type="text" id="myElement"/>
<script type="text/javascript">
/*js数组的两种定义方式
var mycars=["Saab","Volvo","BMW"];
var mycars=new Array("Saab","Volvo","BMW")
{XX:XX}是对象的一个实例
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
*/
var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];
var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';
var jsonObj = $.parseJSON(jsonString);
var sourceArr = [];
for (var i = 0; i < jsonObj.length; i++) {
sourceArr.push(jsonObj[i].label);
}
var sourceX=["aaa","bbb","CCC"];
$('#myElement').typeahead({
//source:mySource
source:sourceArr
}); //-----ok
</script>
这里展示了两种数据源 一种是javascript对象数组 一种是json数据
其实呢 json数据也是先处理为javascript数组再用的 这里的例子是将这里json的数据处理成了sourceX那种的的形式
放在了sourceArr中
好啦 下一个随笔来写如何结合使用ajax