且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

bootstrap 3 typeahead.js :我在哪里可以找到有效的示例代码?

更新时间:2022-10-30 14:07:42

使用 Bootsrap 很难,因为 TYPEHEAD for exp.:

完整文档

 <头><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"><风格>html {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;字体大小:18px;行高:1.2;颜色:#333;}.tt-下拉菜单{文本对齐:左;}.提前输入,.tt 查询,.tt-提示{填充:8px 12px;字体大小:24px;大纲:无;}.typeahead {背景色:#fff;}.tt 查询 {-webkit-box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);}.tt-提示{颜色:#999}.tt-下拉菜单{宽度:422px;边距顶部:12px;填充:8px 0;背景色:#fff;边框:1px 实心 #ccc;边框:1px 实心 rgba(0, 0, 0, 0.2);-webkit-border-radius: 8px;-moz-border-radius: 8px;边框半径: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-建议{填充:3px 20px;字体大小:18px;行高:24px;}.tt-suggestion.tt-cursor {颜色:#fff;背景颜色:#0097cf;}.tt-建议 p {边距:0;}</风格>头部><身体><div class="容器"><div class="countries"><!-- 这是examples.js 中的.countries --><div class="demo"><input class="typeahead form-control" type="text" placeholder="Countries" autocomplete="off" spellcheck="false" dir="auto" ><!-- 这是那个js中的打字头类--><input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; "><pre aria-hidden="true" style="position: absolute; visible: 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;">

<span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-countries"></div></span>