CODEWITHSUNDEEP
htmltwitter-bootstrapdatasourcetypeahead
Rober
Rober

Reputation: 6108

Bootstrap typeahead data-source attribute

I´m just trying to do a simple Bootstrap typeahead plugin example in an HTML5 project. I´m trying to provide the sources with data-source attribute in input element. The examples look so easy, but it doesn´t work for me.

It looks like bootstrap is working and the javascript is called. When I type a character in the input the dropdown list is shown but just the first character (not the whole word).

This is my code:

    <!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>

Upvotes: 4

Views: 10135

Answers (2)

tsanchev
tsanchev

Reputation: 406

Rewrite it as: 

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

Upvotes: 1

Adrian Mouat
Adrian Mouat

Reputation: 46480

The value of the data-source attribute is JSON, which requires double quotes for strings. Try rewriting it as:

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

BTW I'd also add autocomplete="off" to the input element to turn off browser autocomplete.

Upvotes: 9

Related Questions