Speed up development with full-stack environments for every branch.

Learn More

Search items in multiple datasets with typeahead.js [jQuery and JavaScript]

Forked from How to use the jQuery $().ready function.

1659 Runs 5710 Views 2683 Copies


zarknight 7

published 4 years ago

  <meta charset="utf-8">
  <title>Search items in multiple datasets with typeahead.js</title>
  <!-- Bootstrap CSS Toolkit styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">

  <div class="container">
    <p class="example-description">Two datasets that are prefetched, stored, and searched on the client: </p>
    <input id="my-input" class="typeahead" type="text" placeholder="NBA and NHL teams">

  <!-- Load jQuery and the typeahead JS files -->
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/typeahead.min.js"></script>

  <script type="text/javascript">
    // Waiting for the DOM ready...

      // applied typeahead to the text input box
        // data source one
          name: 'nba-teams',
          prefetch: 'data/nba.json',
          header: '<h3 class="league-name">NBA Teams</h3>'

        // data source two
          name: 'nhl-teams',
          prefetch: 'data/nhl.json',
          header: '<h3 class="league-name">NHL Teams</h3>'

Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).