Autocomplete TypeaHead Search Jquery With JavaScript

Autocomplete Typeahead Search Jquery With JavaScript

TypeaHead is a flexible JavaScript library that provides a solid foundation for creating typeheads. Whereas jquery Search Autocomplete is a feature where the application predicts the remaining words typed by users via Android and iOS smartphones, this is called predictive text.

How To use it

1. The first step, please first install the css styles and javascript typeahed.bundle.js below.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

2. After the first step is complete, please copy the global style code below.

html,
body {
    line-height: 1.5;
    text-align: center;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

*,
::before,
::after {
    box-sizing: border-box;
}

:focus {
    outline: none;
}

h1 {
    font-size: 2.3rem;
    margin: 2rem 0 1.5rem;
}

This css script style is for editing Typeahead, please change it if you understand.

#cdn-search {
    display: inline-block;
}

#cdn-search .query {
    background-color: #EEEEEE;
    border: none;
    border-bottom: 3px solid #CCCCCC;
    color: #333333;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    padding: .75rem;
    width: 300px;
}

#cdnjs-search .query::-moz-placeholder {
    color: #1067c9;
    opacity: 1;
}

#cdnjs-search .query:-ms-input-placeholder {
    color: #1067c9;
    opacity: 1;
}

#cdnjs-search .query::-webkit-input-placeholder {
    color: #1067c9;
    opacity: 1;
}

#cdn-search .url {
    display: none;
    margin-top: 50px;
}

.tt-hint {
    color: #1067c9 !important;
}

.tt-menu {
    text-align: left;
    width: 100%;
}

.tt-menu .no-match {
    background-color: #fc1d12;
    color: #FFFFFF;
    padding: .75rem;
}

.tt-suggestion {
    background-color: #1067c9;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: 700;
    padding: .75rem;
}

.tt-cursor,
.tt-suggestion:hover {
    background-color: #1578e8;
    color: #FFFFFF;
}

3. After doing the two points above, please copy this JavaScript code and put it in place.

$(document).ready(function() {
    var typeahead = $('#cdn-search .query');

    $.get('https://api.cdnjs.com/libraries').done(function(data) {
        var searchData = data.results;
        var search = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            local: searchData
        });

        typeahead.typeahead(null, {
            display: 'name',
            name: 'search',
            source: search,
            templates: {
                empty: function() {
                    return '
unable to match query
';
                },
                suggestion: function(data) {
                    return '
' + data.name + '
';
                }
            }
        }).on('typeahead:select', function(e, datum) {
            var latest = datum.latest;
            $('.url').text(latest).show().delay(3000).fadeOut(300);
            clearSearch();
        }).on('typeahead:change', function() {
            clearSearch();
        });
    }).fail(function() {
        console.log("error getting cdnjs libraries");
    });

    // clear typeahead search and close results list
    function clearSearch() {
        typeahead.typeahead('val', '');
        typeahead.typeahead('close');
    }
});

Live Demo

See the Pen Typeahead Search With JavaScript by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :

typeahead-search-with-javascript.zip

Size :

8.49KB

Site Download :

Codepen.io

Official Website:

Go to website

License:

MIT

• Link Demo
• Download File

File Download

X

To get this scripts? you can download it using the button below Download File, all free without a password.

Click Here