Flexdatalist - Automaattinen täydennysosa
HTML5 elementti on varsin hyödyllinen nykyaikaisessa frontend-kehityksessä. Silti se on yksi niistä tekijöistä, joita monet kehittäjät eivät tiedä.
Se toimii syöttökentällä, jossa voit tiettyjä arvoja automaattisesti. Oletusasetus näyttää kunnossa, ja olemme peittäneet joitakin koodausvinkkejä viileiden vaikutusten rakentamisesta autosuggest datalistsilla.
On kuitenkin paljon helpompaa työskentele laajennuksen kanssa kuten Flexdatalist. Se tukee laajempaa valikoimaa selaimia ja voit täysin mukauttaa datalistisi suunnittelua.
Kaikilla ei ole tarvetta automaattisiin täydennysominaisuuksiin ja natiivien HTML5-datalistien kanssa et välttämättä häiritse laajennusta. Flexdatalist on kuitenkin ehkä paras, koska se on perustuu natiiviin datalistiseen käyttäytymiseen lisätä:
- Mobiili reagoiva tuki
- Kunkin kohteen ylimääräiset kuvaukset
- Vaihtoehtoja useille valinnoille kerralla
- Mukautetut tapahtumakäsittelijät
Sen kaikki powered by jQuery, niin voit tarvitset kopion uusimmasta versiosta saada tämä juoksu. Se myös mukana tulee oma CSS-tyylitaulukko jonka haluat ehkä yhdistää yhdeksi CSS-tiedostoksi HTTP-pyyntöjen vähentämiseksi.
Voit löytää koko asennusohje tärkeimmällä demo-sivulla, joka sisältää lataa linkkejä Flexdatalist-tiedostoihin.
Se on todella helppo asentaa vain yksi JavaScript-rivi. Oletuksena plugin kohdistuu kaikkiin syöttöihin luokan kanssa .flexdatalist, niin vain lisäämällä, että koodiinne riittää, jotta näet tulokset.
Lisää vain elementti syöttökentässä ja Flexdatalist käsittelee loput. lyhennys muodosta 'it will' luo luettelo automaattisesti, mukaan lukien valinnainen kuvaileva teksti.
Yksinkertaisin tapa lisätä ylimääräistä tekstiä on JSON-tiedoston kautta jonka voit liitä syötteesi tietomääritteellä.
Jos esimerkiksi tarkistat Flexdatalist-esittelysivun, löydät a “Maat” syöttökenttä data-data = 'countries.json'. Tämä viittaa kauko-tiedostoon tallentaa kaikki raakatulotiedot ulkoisesti.
Liian moni näistä kentistä on mahdollista hidastaa sivua hieman. En kuitenkaan osaa kuvitella, että monet sivustot näkisivät useamman kuin yhden näistä datalistimuodoista yhdellä sivulla, puhumattakaan edes tämän jQuery-laajennuksen kanssa. vielä melko nopeasti.
Aloittaaksesi vain käy GitHub-repossa ja lataa kopio. Tämä sisältää a linkki pääesityksen sivulle joka sisältää myös täydelliset dokumentaatiot, JavaScript-asetukset ja runsaasti näytekoodinpätkiä.
