Bootstrap typeahead數據源屬性

我只是試圖在HTML5項目中做一個簡單的Bootstrap typeahead插件示例。我試圖在input元素中提供數據源屬性。這些例子看起來很簡單，但它對我來說不起作用。Bootstrap typeahead數據源屬性

它看起來像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>

來源

2013-07-30 Rober

數據源屬性的值是JSON，這需要字符串雙引號。嘗試重寫它：

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

順便說一句我也想補充autocomplete="off"到輸入元素來關閉瀏覽器自動完成。

來源

2013-07-31 08:40:31

重寫成：

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

來源

2015-03-31 11:44:43 tsanchev

Bootstrap typeahead數據源屬性

回答

相關問題