Tässä artikkelissa ohjeistetaan AJAX-pohjaisen livehaun toteuttaminen Barebones-teeman valmiilla työkaluilla.

Barebones-teema poistuu.

Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.

Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.

Perusteet

Livehaun toteuttamiseen käytetään search.js-pluginia.

Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia.

Oletusteemoihin jQuery on lisätty valmiiksi.

Löydät pluginin oletusteeman tiedostosta /scripts/plugins/search.js.

Haun ulkoasu määritellään tiedostossa /styles/scss/modules/_search.scss.

Kun plugin on alustettu teemassa, se seuraa automaattisesti valittuun hakukenttään syötettäviä hakusanoja, suorittaa haut automaattisesti AJAX-pyyntöinä ja näyttää hakukentän yhteydessä livehakutulokset.

Plugin sisältää koukkufunktioita, joiden sisältämä JavaScript-koodi suoritetaan määrättyjen tapahtumien yhteydessä. Katso koukkujen kuvaukset seuraavasta kappaleesta.

Koukkufunktiot

Alla on listattu kaikki pluginin sisältämät koukut. Nämä on alustettu valmiiksi teeman /scripts/custom.js-tiedostossa.

beforeUpdate()

Suoritetaan ennen hakutuloslistan päivittymistä.

afterUpdate()

Suoritetaan kun hakutulokset on päivitetty.

Jos haluat lisätä teemaan omia toimintojasi koukkujen seuraamien tapahtumien yhteyteen, lisää oma koodisi koukkufunktioiden sisään.

Koukkujen sisältö määritellään pluginin alustamisen yhteydessä. Katso ohjeet tähän seuraavasta kappaleesta.

Pluginin alustaminen

Search-plugin alustetaan seuraavasti:

new MCF.Search({
	$searchForm: $('#LiveSearch'),

	beforeUpdate: function ($elem) {
		MCF.Loaders.show($elem);
	},

	afterUpdate: function ($elem) {
		MCF.Loaders.hide($elem);
	}
});

Esimerkissä näytetään koukkufunktioissa loaders.js-pluginin avulla latausoverlay hakutuloslistalla, sillä välin kun hakutuloksia päivitetään.

$searchForm-parametriin annetaan arvoksi hakukentän lomake jQuery-objektina. Oletusteemassa tämä on sivuston päähakukenttä.