Seuraava artikkeli auttaa sinua: Kuinka luoda JQueryn automaattisen täydennyksen tekstilaatikko esimerkin avulla
JavaScript lisää elämää online-sovellusten ja verkkolomakkeiden käyttöliittymään. 💫
JS:n avulla voit luoda erittäin vuorovaikutteisia verkkokokemuksia, jotka olisivat olleet haastavia pelkästään HTML:n ja CSS:n avulla. jQuery-käyttöliittymäkirjastossa on runsaasti vuorovaikutuksia, widgetejä, teemoja, tehosteita ja apuohjelmia, joita voit helposti käyttää. Yksi tällainen hyödyllinen widget on .
Ajattele, kuinka Google säästää aikaasi automaattisen täydennyksen ehdotuksilla hakiessasi verkossa.
jQuery Autocomplete voi auttaa sinua toteuttamaan samanlaisia toimintoja verkkosovelluksessasi tai lomakkeessasi. Tällaisten toimintojen tarjoaminen käyttäjille voi auttaa sinua:
- Pehmennä käyttökokemusta
- Vähennä kognitiivista kysyntää
- Vältä kirjoitusvirheitä
Voit käyttää jQuery Autocomplete -widgetiä HTML-elementtien kanssa: tekstilaatikko, tekstialue ja syöttö. Se käynnistyy avaustapahtumassa ja näyttää automaattisen täydennyksen ehdotukset käyttäjille aina, kun he kirjoittavat jotain kenttään.
Tässä blogiviestissä aion näyttää sinulle jQuery Autocomplete -tekstiruudun valintaesimerkin taulukon ja tietokannan kautta. 😃
jQuery Autcomplete -esimerkki + koodi
Tässä esimerkissä olen käyttänyt jQuery Autocomplete -widgetiä hakemaan ehdotuksia Yhdysvaltojen osavaltioille ja alueille. Toiminto käynnistyy, kun alat kirjoittaa tekstiruutuun. Esimerkiksi kun kirjoitat kirjaimet “al” tekstiruutuun, jQuery Autocomplete -widget etsii koko taulukosta tai tietokannasta (jos se on yhdistetty) ja hakee kaikki vastaavat tulokset, jotka sisältävät syötetyn tekstin, jotka ovat “Alabama” ja “Alaska” Tämä tapaus.
Yllä olevassa esimerkissä käytin taulukkoa ilmoittamaan luettelo kaikista Yhdysvaltojen osavaltioista ja alueista. Voit ottaa seuraavan koodin viitteeksi:
< title>jQuery-käyttöliittymän automaattinen täydennys – oletustoiminto < linkki rel="stylesheet" href="http://meetanshi.com/resources/demos/style.css">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
|
jQuery automaattinen täydennys tietokannasta
Taulukon käyttämisen sijaan voit myös asettaa tietokannan lähteeksi automaattisen täydennyksen ehdotusten näyttämiselle. Esimerkiksi, käytin alla olevaa koodia jQueryn automaattisen täydennyksen hakemiseen tietokannasta JSON-koodauksella:
var availableProducts = ; $(document).on(‘focusout keyup’, ‘.invoice_item’, function (indeksi, arvo) { boxId = jQuery(this).attr(‘id’); $(“#”+boxId).autocomplete({ lähde: availableProducts, }); });
|
var availableProducts = ; $(document).on(‘focusout keyup’, ‘.invoice_item’, function (indeksi, arvo) { boxId = jQuery(this).attr(‘id’); $(“#”+boxId).autocomplete({ lähde: saatavilla olevat tuotteet, }); }); |
Se siitä! Näin voit käyttää jQuery Autocomplete -widgetiä syöttöehdotusten näyttämiseen tekstikentässä.
Jos sinulla on edelleen epäilyksiä tästä ratkaisusta, voit mainita ne kommenteissa; Autan sinua mielelläni! 😇
Aiemmin kollegani näytti sinulle menetelmän, jolla voit ladata nykyisen sivun uudelleen menettämättä lomaketietoja JavaScriptin avulla, jonka haluat ottaa käyttöön verkkosovelluksessasi tai -lomakkeessasi.
Piditkö tästä postauksesta? Arvioi se 5 tähdellä ja jaa se teknikkokavereidesi kanssa! 😃
Kiitos lukemisesta! 🍀
