IT TUTORIJALI

Bootstrap - Typeahead

Kreiranje Typeahead-a pomoću Bootstrap-a

Polja za unos unaprijed su vrlo popularna u modernim web obrazcima. Glavna svrha korištenja typeahead-a je poboljšati korisničko iskustvo pružanjem savjeta ili liste mogućih izbora na osnovu teksta koji su unijeli dok su ispunjavali obrazac ili pretražujući nešto - kao što je Google instant pretraga. Funkcionalnost Typeahead takođe štedi vrijeme i smanjuje broj potencijalnih grešaka, jer korisnik ima manju vjerovatnoću da će napraviti pravopisnu grešku.

Typeahead dodatak je izbačen iz Bootstrapa (v3.0+), u korist korištenja Twitter typeahead-a. Twitter typeaheads je brza i potpuno opremljena biblioteka automatskog dovršavanja inspirisana funkcijom pretraživanja twitter.com. Da biste kreirali Twitter typeaheads, prvo preuzmite typeahead.js sa sljedećeg linka — https://twitter.github.io/typeahead.js/ i uključite ga u svoj projekat, nakon toga možete pretvoriti bilo koji element baziran na tekstu <input> u typeahead.

Kreiranje Twitter Typeahead sa lokalnim skupom podataka

Sljedeći primjer će vam pokazati kako kreirati Twitter s lokalnim skupom podataka.

<script>
$(document).ready(function(){
    // Definiranje lokalnog skupa podataka
    var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 
                'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'];
    
    // Konstrukcija motora sugestija (suggestion engine)
    var cars = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: cars
    });
    
    // Inicijalizacija typeahead
    $('.typeahead').typeahead({
        hint: true,
        highlight: true, /* Omogućite isticanje podstringa */
        minLength: 1 /* Navedite minimum znakova potrebnih za prikaz prijedloga */
    },
    {
        name: 'cars',
        source: cars
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kreiranje Twitter Typeahead koristeći lokalne podatke</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script  type="text/javascript" src="/examples/js/typeahead/0.11.1/typeahead.bundle.js"></script>
<script>
$(document).ready(function(){
    // Definiranje lokalnog skupa podataka
    var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 
'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'];
    
    // Konstrukcija motora sugestija (suggestion engine)
    var cars = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: cars
    });
    
    // Inicijalizacija typeahead
    $('.typeahead').typeahead({
        hint: true,
        highlight: true, /* Omogućite isticanje podstringa */
        minLength: 1 /* Navedite minimum znakova potrebnih za prikaz prijedloga */
    },
    {
        name: 'cars',
        source: cars
    });
});  
</script>
<style>
.bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 22px; /* Postavljanje veličine fonta za unos */
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 22px;  /* Postavljanje veličine fonta padajućeg menija */
    padding: 3px 20px;
}
.tt-suggestion:hover {
    cursor: pointer;
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
</style>
</head>
<body>
    <div class="bs-example">
        <h2>Tip vašeg omiljenog auta</h2>
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>

Napomena!

Bloodhound je mehanizam za prijedloge typeahead.js. Vrlo je fleksibilan i nudi napredne funkcionalnosti kao što je prethodno dohvatanje udaljenih podataka, brzo traženje putem inteligentnog keširanja koristeći lokalnu pohranu pretraživača, itd.

Savjet!

Postavite autocomplete="off" za polje unosa ako želite da spriječite da se zadani meniji pretraživača pojavljuju preko padajućeg menija Bootstrap-a.

Kreiranje vanjskog skupa podataka Twitter Typeahead

Takođe možete specifikovati vanjski skup podataka kroz URL koji ukazuje na JSON datoteku koja sadrži niz podataka. Pojedinačne jedinice koje sastavljaju skupove podataka nazivaju se datumi.

<script>
$(document).ready(function(){
    // Sonstructs motor prijedloga (suggestion engine)
    var countries = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // Url upućuje na json datoteku koja sadrži niz naziva zemalja
        prefetch: 'data/countries.json'
    });
    
    // Inicijaliziranje unaprijed typeahead udaljenim skupom podataka bez isticanja
    $('.typeahead').typeahead(null, {
        name: 'countries',
        source: countries,
        limit: 10 /* Odredite maksimalan broj prijedloga za prikaz */
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kreiranje Twitter Typeahead koristeći JSON podatke</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script  type="text/javascript" src="/examples/js/typeahead/0.11.1/typeahead.bundle.js"></script>
<script>
$(document).ready(function(){
    // Sonstructs motor prijedloga (suggestion engine)
    var countries = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // Url upućuje na json datoteku koja sadrži niz naziva zemalja
        prefetch: '/examples/data/countries.json'
    });
    
    // Inicijaliziranje unaprijed typeahead udaljenim skupom podataka bez isticanja
    $('.typeahead').typeahead(null, {
        name: 'countries',
        source: countries,
        limit: 10 /* Odredite maksimalan broj prijedloga za prikaz */
    });
});  
</script>
<style>
.bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 22px; /* Postavljanje veličine fonta za unos */
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 22px;  /* Postavljanje veličine fonta padajućeg menija */
    padding: 3px 20px;
}
.tt-suggestion:hover {
    cursor: pointer;
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
</style>
</head>
<body>
    <div class="bs-example">
        <h2>Upišite naziv vaše zemlje</h2>
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>

Preuzmite json spisak zemalja sa sljedećeg linka.