Valikot (select2)

Oletusvalikko

• oletusvalikko: <select> jolla luokka select2-e

  • jos valintoja alle 20 ei näytetä hakua
  • leveys oletuksena 100%

<select class="select2-e">
   <option value="1">Red</option>
   <option value="2">Blue</option>
   <option value="3">Green</option>
</select>

Eduplan GUIn oletusinitialisointi

$(".select2-e").select2({
   minimumResultsForSearch: 20,
   width: "100%"
});

Oletusmonivalinta

•  <select> jolla luokka selec2-e ja attribuutti multiple

<select class="select2-e" multiple>
   <option value="1">Red</option>
   <option value="2">Blue</option>
   <option value="3">Green</option>
</select>

Ajax-valikko

• ajaxia käyttävät select2-elementit luodaan AINA hidden inputille

<input id="remote" type="hidden" />

<!-- jolloin javascript voisi olla esim -->
egselect("#remote", { placeholder: "Select" } , { url: 'url' });

• haun tulee palauttaa jsonia

  • id = arvo joka halutaan tallentaa

  • text = teksti, joka näytetään käyttäjälle

  • esim. hakusanalla gr palautuu Eduplan GUI esimerkissä seuraavanlainen json

[{"id":"green","text":"Green"},{"id":"grey","text":"Grey"}]

jolloin valikko näyttää tältä

Esivalinta

• select
  
  • optionille normaalisti attribuutti selected
• input hidden
  • valueksi json muodossa halutut valinnat (JSON saman muotoista kuin haettaessa), esim:
    
    

    <input id="remote-prefill" type="hidden" value='[{"id":"green","text":"Green"}, {"id":"black","text":"Black"}]'/>

egselect(elem, opts, ajax)

Pakollinen	Parametri	Oletus	Huom
	elem	-	elementin luokka tai id stringinä, vaatii myös . tai # eli jos luokka on test annetaan parametriksi ".test" ja vastaavasti id "#test"
	opts	{ minimumResultsForSearch: 10, width:"100%" }	voidaan antaa select2 parametrejä vapaasti ja yliajaa oletukset
	ajax	ei käytetä, jos parametria ei annettu, muuten oletus: { url: "parametrissa annettu url", dataType: "jsonp", data : function (term, page) { return { term: term, page: page } }, results: function (data, page) { return { results: data }; } }	jos halutaan tehdä ajax-haku, minimivaatimus tälle parametrille on { url : '/polku/urliin/joka/palauttaa/jsonia' } mikäli halutaan jollakin tavalla monimutkaisempia hakuja tai halutaan palauttaa muunmuotoisia dataa tmv, tehdään joko oma select2-init dokumentaation mukaisesti tai jos tarpeeksi geneerinen ja usein tarvittu tapa tehdä, voidaan lisätä ominaisuus egselectiin -> luo issue