How to use of typeahead example?

Question

I want to use of this example so create follow html page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/typeahead.bundle.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="the-basics">
    <input class="typeahead" type="text" placeholder="States of USA">
    </div> 
    <script type="text/javascript">
      var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
    // the typeahead jQuery plugin expects suggestions to a
    // JavaScript object, refer to typeahead docs for more info
    matches.push({ value: str });
    }
    });

    cb(matches);
    };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    $('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
    },
    {
    name: 'states',
    displayKey: 'value',
    source: substringMatcher(states)
    }); 
    </script>
  </body>
</html>

And download all of the linked file, typeahead.bundle.min.js from here and other, from official bootstrap website. but I got follow errors

Uncaught TypeError: Cannot read property 'isArray' of undefined
Uncaught TypeError: undefined is not a function

Could you please help me how to use of this example?

score 1 · Accepted Answer · answered Jan 17 '15 at 15:17

1

Your problem is the order you're loading the JS libraries.

Put

<script src="js/typeahead.bundle.js"></script>

either after

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

or after

<script src="js/bootstrap.min.js"></script>

Either way should fix your issue.

answered Jan 17 '15 at 15:17

U r s u s

6,680
12
50
88

Thank you so much, Could you please tell me why CSS not working? For now I have a simple text box rather than bootstrap textbox. – Daniyal Jan 17 '15 at 15:35
No problem. Is the bootstrap css file actually in your project css folder? – U r s u s Jan 17 '15 at 15:42
Yes, but there is no typeahead class in bootstrap.min.css. I'm also try copy typeahead class from http://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3, but still not working. Thanks again... – Daniyal Jan 17 '15 at 15:55

How to use of typeahead example?

1 Answers1