Typehead: pentru Bootstrap 3 şi nu numai


Una dintre deciziile asupra cărora sper să se revină a fost eliminarea din Bootstrap 3 a componentei pentru precompletare de text. Era o treabă simplă, frumos încadrată în Bootstrap… de ce au scos-o? Acum soluţia este un plugin extern, formidabil, nimic de spus, dar oricum ai nevoie de nişte paşi în plus. Mai exact ai nevoie de typehead.js, care ne oferă o demonstraţie din chiar prima pagină şi mai multe demonstraţii aici. Da, puternic! Totuşi, pentru proiecte simple webmasterii mai începători riscă mai mult să îşi cam prindă urechile.

imagine

Şi unde mai pui că după ce ai făcut partea JavaScript să meargă… zero la capitolul CSS. Da, typehead.js nu include nimic pentru partea de aspect. În timp ce exemplele arată foarte bine online, în testele proprii vei vedea o listă a rezultatelor fără nici cea mai mică îngrijire. De aceea vă recomand typeahead.js-bootstrap-css, care face ceea ce presupuneţi. Sau vizual face trecerea de la ceea ce vedeţi în stânga la ceea ce vedeţi în dreapta. Desigur, puteţi edita suplimentar, pentru o integrare mai bună în designul paginii Dvs.

imagine

Pentru claritate am întocmit un mic exemplu, pe care îl găsiţi aici. Veţi putea astfel să studiaţi sursele. Dar înainte să închei un link spre proiectul typeahead.js pe Github, unde găsiţi şi documentaţia.

<!DOCTYPE HTML>
<html>
<head>
    <title>Typeahead</title>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="typeaheadjs.css">
    <style>
        #judete { padding: 20px; }
        .boxa { border: 1px solid #ccc; padding: 5px; }
    </style>
</head>
<body>

<div id="judete">
  <input class="typeahead boxa" type="text" placeholder="judeţele României">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="typeahead.bundle.min.js"></script>

<script>
$(function(){
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;
            matches = [];
            substrRegex = new RegExp(q, 'i');
            $.each(strs, function(i, str) {
                if (substrRegex.test(str)) {
                    matches.push({ value: str });
                }
            });
            cb(matches);
        };
    };

    var judete = ['Alba', 'Arad', 'Argeş', 'Bacău', 'Bihor',
        'Bistriţa-Năsăud', 'Botoşani', 'Braşov', 'Brăila', 'Buzău', 'Călăraşi',
        'Cluj', 'Constanţa', 'Covasna', 'Dâmboviţa', 'Dolj', 'Galaţi', 'Giurgiu',
        'Gorj', 'Harghita', 'Hunedoara', 'Ialomiţa', 'Iaşi', 'Ilfov',
        'Maramureş', 'Mehedinţi', 'Mureş', 'Neamţ', 'Olt', 'Prahova',
        'Satu Mare', 'Sălaj', 'Sibiu', 'Suceava', 'Teleorman', 'Timiş',
        'Tulcea', 'Vaslui', 'Vâlcea', 'Vrancea'];

    $('#judete .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            name: 'judete',
            displayKey: 'value',
            source: substringMatcher(judete)
    });
});
</script>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *