4

HTML5 プロジェクトで単純な Bootstrap typehead プラグインの例を実行しようとしています。入力要素に data-source 属性を持つソースを提供しようとしています。例はとても簡単に見えますが、私にはうまくいきません。

ブートストラップが機能しているようで、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>
4

2 に答える 2

9

data-source 属性の値はJSONで、文字列には二重引用符が必要です。次のように書き直してみてください。

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

ところでautocomplete="off"、ブラウザのオートコンプリートをオフにするために、入力要素にも追加します。

于 2013-07-31T08:40:31.507 に答える
1

次のように書き換えます。

    data-source="[&quot;Alabama&quot;, &quot;California&quot;, &quot;Marte&quot;]"
于 2015-03-31T11:44:43.797 に答える