Rob*_*ber 4 html5 datasource typeahead twitter-bootstrap
我只是想在HTML5项目中做一个简单的Bootstrap typeahead插件示例.我试图在input元素中为source提供data-source属性.这些例子看起来很简单,但对我来说不起作用.
它看起来像bootstrap工作,并调用javascript.当我在输入中键入一个字符时,会显示下拉列表,但只显示第一个字符(而不是整个字).
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rober HTML5 Bootstrap Sample</title>
<!-- CSS files -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Welcome to my HTMl5 Bootstrap example!</h1>
<div class="well">
<input type="text" class="span3" data-provide="typeahead" data-items="4" placeholder="Introduce un país"
data-source="['Alabama', 'California', 'Marte']" >
</div>
<!-- Javascript files - At the end of the page load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
data-source属性的值是JSON,它需要字符串的双引号.尝试将其重写为:
data-source='["Alabama", "California", "Marte"]'
顺便说一下,我还要添加autocomplete="off"到input元素以关闭浏览器自动完成功能.
| 归档时间： |
|
| 查看次数： |
8851 次 |
| 最近记录： |