Wikier

Liferay - design

Inline søkefelt

Slik kan du lage en søkefelt i en web-side som gjør et søk i NTNUs søkemotor. Med å endre noen få parameter kan du avgrenset resultat til en type resultat, eller søk i en avgrenset mengde sider.

Brukes på egen regning

Dersom du velger å legge en egen søkefelt inn på dine sider, tar du også ansvar for endringer og justeringer som kan være nødvendig hvis søketjenesten blir justert.

Eksempel 1  

Hvis du vil lage en søkefelt i en web-side — som søker i sider med en spesifikk url — legger du følgende html-kode inn i din webside.

 <form accept-charset="utf-8" action="/sok" aria-label="Search only conference pages" id="search_form" method="get" role="search"><label class="sr-only" for="search_form_query">Search conference pages</label>
<div class="simpleForm form-inline mb-2">
<div class="simpleFormContent input-group"><input autocomplete="off" class="form-control" id="search_form_query5" name="query" onfocus="this.value='';" onkeydown="doOnEnter(event,submitSearch);" size="40" type="text" value="Search NN conf pages" /> <input class="btn btn-outline-primary doSearch" onclick="submitSearch();return false;" type="submit" value="Search" />
<div class="d-none"><input id="siteurls" name="urlfilter" onclick="submit();" type="hidden" value="/ntnu-european-conference-2020" /> <input id="ordering" name="sortby" onclick="submit();" type="hidden" value="magic" /></div>
</div>
</div>
</form>​​​​​​​ 


​​​​​​​Eksempelet over avgrenser søket til kun å gjelde sider som ligger under "/ntnu-european-conference-2020" og sorterer etter relevans.

Endre kodesnutt til eget formål

  • input value="Search NN conf pages" er teksten i søkefeltet før brukeren taster noe selv
  • aria-label="Search only conference pages" beskriver skjema for tilgjengelighetens skyld
  • <label class="sr-only" for="search_form_query">Search conference pages</label> er en alternativ merkelapp for skjermlesere
  • size="40" styrer lengden på søkefeltet
  • value="Search" er det som står på søkeknappen
  • value="/ntnu-european-conference-2020" avgrenser søket til sider som har dette i URLen.
  • value="magic" sier at resultater skal vises iht relevans. 

Filtrering- og sorteringsmuligheter

Følgende kan legges inn som skjulte input for å filtrere resultater:

  • name="urlfilter" se info og Eksempet 1 over
  • name="category" se Eksempel 2 under
  • name="sortby" se Eksempel 2 under

Filtrering  (name="categoy")

Slik kan du avgrenser søket til kun å gjelde ansattsider, studier eller emner:<

<input name="category" value="employee" type="hidden" id="emp_only" onclick="submit();" />

Mulighetene er:

  • value="all" viser resulatater fra alle kategorier (standard oppførsel)
  • value="employee" viser kun ansattsider
  • value="courses" viser kun offisielle emnesider
  • value="studies" viser toppsiden for offisielle studieprogramsider
  • value="org" viser kun de offisielle landingssider for NTNUs enheter

Sortering (name="sortby")

Slik kan du bestemme rekkefølgen til resltatene:

<input name="sortby" value="magic" type="hidden" id="ordering" onclick="submit();" />

Mulighetene er:

  • value="magic" sorterer etter relevans (standard oppførsel)
  • value="alpha" presenterer resultater alfabetiisk
  • value="fresh" viser de nyeste resultater øverst

Eksempel 2 - Søk etter personer

Dette avgrenser søket til kun til ansattsider, og presenterer liste alfabetisk.

<form accept-charset="utf-8" action="/sok" aria-label="Sitewide person search" id="search_form" method="get" role="search"><label class="sr-only" for="search_form_query">Søk etter ansatte</label> <div class="simpleForm form-inline mb-2"> <div class="simpleFormContent input-group"><input autocomplete="off" class="form-control" id="search_form_query" name="query" onfocus="this.value='';" onkeydown="doOnEnter(event,submitSearch);" size="40" type="text" value="Søk etter ansatte" /> <input class="btn btn-outline-primary" onclick="submitSearch();return false;" type="submit" value="Søk" /> <div class="d-none"><input name="category" onclick="submit();" type="hidden" value="employee" /><input id="ordering" name="sortby" onclick="submit();" type="hidden" value="magic" /></div> </div> </div> </form>