Get started with bootstrap-3-typeahead CDN

MIT licensed

Bootstrap-3-Typeahead: Interactive search with Typeahead.js in Bootstrap 3.

Tags:
  • typeahead
  • autocomplete
  • plugin
  • jquery
  • bootstrap

Stable version

Copied!

How to start using bootstrap-3-typeahead CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-3-typeahead CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="text-center">Typeahead Example</h1>
        <div class="input-group">
            <input type="text" class="form-control" id="city-input">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>
        <ul id="city-list" class="list-unstyled"></ul>

        <script>
            $(document).ready(function() {
                var cities = ["New York", "Los Angeles", "Chicago", "Miami", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas"];

                $('#city-input').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                }, {
                    source: function(query, process) {
                        var matcher = new RegExp('^' + $.escapeRegularExpressions(query) + '(.*)$', 'i');
                        return $.grep(cities, function(city) {
                            return matcher.test(city);
                        });
                    },
                    templates: {
                        suggestion: function(data) {
                            return '<li><a href="#">' + data + '</a></li>';
                        }
                    }
                }).on('typeahead:selected', function(event, datum) {
                    $('#city-list').append('<li>' + datum + '</li>');
                });
            });
        </script>
    </div>
</body>
</html>
Copied!
Copied!

All versions