Templates/examples/templates/autocomplete

Denne løsning kræver jquery og jquery autocomplete plugin'et, som du kan finde her: [1].

Hvis du kører din javascript i en ekstern fil, vil du skulle indsætte dette i din "global.html" fil for at kunne bruge variablen "webshop_url":

    <script>
		var webshop_url = '<{$baseurl}>';
    </script>

Ellers kan du blot bruge "<{$baseurl}>" i stedet for "webshop_url" i "source"-optionen. Se et fuldt eksempel her under:

$("#searchAutoComplete").autocomplete({
        source: webshop_url + '/ajax_search',
        select: function( event, ui ) {
			$( "#my_ac" ).val( ui.item.name + " / " + ui.item.price );
			return false;
		}
    }).data( 'uiAutocomplete' )._renderItem = function( ul, item ) {
		return $( '<li></li>' )
			.data( 'item.autocomplete', item )
			.append( '<a href="' + item.url + '" class="imgA"><img src="' + item.thumbnail + '" alt="' + item.name + ' billede" />
</a><a href="' + item.url + '"><strong>' + item.name + '</strong></a><p
<strong>Pris: </strong>' + item.price_dk + ' DKK</p><p><strong>Lager: </strong>' + item.stock_string_da + '</p>' )
			.appendTo( ul );
		};

Bemærk at dette er et lidt advanceret eksempel, som tager både screenshots, navn, pris og lagerstatus.

Her kalder vi eks: http://mbn.shoporama.dk/ajax_search?term=buk som returnere et json objekt for hver produkt i søgeresultatet. Klik på linket for at se hvilke felter der kan trækkes ud.

Eksempel på et søgefelt, husk at ID'et skal passe med din jquery selector:

<form action="<{$webshop->getUrl()|escape}>/search">
  <input id="my_ac" type="text" name="search" value="<{$get.search|escape}>" placeholder="Indtast søgeord" required/>
  <input type="submit" value="Søg"/>
</form>

Se et eksempel på http://spilmedsmil.dk