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

Learn More

Defines custom sugguestion templates for typeahead.js [jQuery and JavaScript]

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

3399 Runs 15307 Views 7438 Copies
Saved

Saved

zarknight 7

zarknight
published 3 years ago

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Defines custom sugguestion templates for typeahead.js</title>
  
  <!-- Bootstrap CSS Toolkit styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="container">
    <p class="example-description">Defines a custom template and template engine for rendering suggestions: </p>
    <input id="my-input" class="typeahead" type="text" placeholder="opensource project by twitter">
  </div>

  <!-- Load jQuery, typeahead and Hogan template engine JS files -->
  <script src="js/hogan-2.0.0.js"></script>
  <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...
    $(function(){

      // applied typeahead to the text input box
      $('#my-input').typeahead({
        name: 'twitter-oss',

        // data source
        prefetch: 'data/repos.json',

        // template for each suggestion
        template: [
          '<p class="repo-language">{{language}}</p>',
          '<p class="repo-name">{{name}}</p>',
          '<p class="repo-description">{{description}}</p>'
        ].join(''),

        // template engine
        engine: Hogan                                                               
      });

    });
  </script>
</body> 
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).