Evaluare utilizator: 0 / 5

Steluță inactivăSteluță inactivăSteluță inactivăSteluță inactivăSteluță inactivă
 

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.

image

Ş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.

image

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>

Read more http://feedproxy.google.com/~r/cnetro/~3/w4dkS187ZxM/