Bootstrap 预输入数据源属性答案

【问题标题】：Bootstrap typeahead data-source attributeBootstrap 预输入数据源属性
【发布时间】：2013-07-31 02:13:35
【问题描述】：

我只是想在 HTML5 项目中做一个简单的 Bootstrap typeahead 插件示例。我正在尝试在输入元素中为源提供数据源属性。这些例子看起来很简单，但它对我不起作用。

看起来引导程序正在工作并且调用了 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>

【问题讨论】：

标签： html twitter-bootstrap datasource typeahead

【解决方案1】：

data-source 属性的值为JSON，字符串需要双引号。尝试将其重写为：

data-source='["Alabama", "California", "Marte"]'

顺便说一句，我还将autocomplete="off" 添加到输入元素以关闭浏览器自动完成功能。

【讨论】：

【解决方案2】：

改写为：

    data-source="[&quot;Alabama&quot;, &quot;California&quot;, &quot;Marte&quot;]"

【讨论】：