Main search

The search bar in the header.


Main search

Component status: WIP

The search bar in the header.

<div class="sitesearch" id="sitesearch">
	<span class="mobileSearchIcon"></span>
	<form action="/s/mdn/soegning" method="get" class="simplesearch" name="simpleSearch" novalidate="novalidate"><!-- dwMarker="form" dwPipelineTitle="Search-Show (storefront)" dwPipelineURL="http://localhost:60606/target=/c/storefront/p/Search-Show" -->
		<div class="sitesearch__container">
			<div class="sitesearch__button-container">
				<button type="submit" value="" name="simplesearch">
					<?xml version="1.0" encoding="UTF-8"?>
					<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
						<title>Page 1</title>
						<desc>Created with Sketch.</desc>
						<defs>
							<polygon id="path-1" points="1.07075129e-15 15.3618 1.07075129e-15 0.000424981343 15.375 0.000424981343 15.375 15.3618"></polygon>
						</defs>
						<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="Header-/-m.-counter-800-px" transform="translate(-360.000000, -14.000000)">
								<g id="Group" transform="translate(360.041631, 44.192388) rotate(-45.000000) translate(-360.041631, -44.192388) translate(343.541631, 26.692388)">
									<g id="Page-1" transform="translate(37.319777, 8.005022) rotate(-315.000000) translate(-37.319777, -8.005022) translate(29.319777, 0.005022)">
										<mask id="mask-2" fill="white">
											<use xlink:href="#path-1"></use>
										</mask>
										<g id="Clip-2"></g>
										<path d="M2.5916,10.2918 C0.4686,8.1688 0.4686,4.7148 2.5916,2.5918 C3.6536,1.5298 5.0476,0.9998 6.4426,0.9998 C7.8366,0.9998 9.2306,1.5308 10.2926,2.5918 C12.4156,4.7148 12.4156,8.1688 10.2926,10.2918 C8.1696,12.4148 4.7146,12.4148 2.5916,10.2918 M15.2286,14.5088 L11.3416,10.6208 C13.5016,8.0908 13.3906,4.2758 10.9996,1.8848 C8.4856,-0.6282 4.3966,-0.6272 1.8846,1.8848 C-0.6284,4.3978 -0.6284,8.4858 1.8846,10.9988 C3.1406,12.2548 4.7916,12.8838 6.4416,12.8838 C7.9386,12.8838 9.4316,12.3608 10.6346,11.3288 L14.5216,15.2158 C14.6196,15.3128 14.7476,15.3618 14.8756,15.3618 C15.0036,15.3618 15.1316,15.3128 15.2286,15.2158 C15.4246,15.0208 15.4246,14.7038 15.2286,14.5088" id="Fill-1" fill="#292929" mask="url(#mask-2)"></path>
									</g>
								</g>
							</g>
						</g>
					</svg>
				</button>
			</div>

			<input type="text" name="q" value="" class="simplesearchinput valid" id="searchinput" autocomplete="off" placeholder="Mærke, kategori eller produkt">
			<button type="reset">
				<?xml version="1.0" encoding="iso-8859-1"?>
				<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
				<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="10px" height="10px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
				<g>
					<g id="cross">
						<g>
							<polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 
								306,341.411 576.521,611.397 612,575.997 341.459,306.011"/>
						</g>
					</g>
				</g>
				</svg>
			</button>
			<div class="sitesearch__backdrop"></div>
		</div>
	</form>
	
	<div id="search-suggestions" style="display: block;">
	
		<div class="clearfix search-suggestion-wrapper-full ">
			<div class="search-suggestion-contents">
				
				<ul>
					<li class="category">
						Kategorier
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/boern/sko">
							Sko i Boern
						</a>
					</li>	
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/bolig/oevrige-kategorier/garderobe-og-entre/skohorn">
							Skohorn i Bolig
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/maerker/magasin-du-nord-collection/herre/sko/sko">
							Sko i Brands
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/maerker/birkenstock/herre/sko/sko">
							Sko i Brands
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/maerker/tiger-of-sweden/herre/sko/sko">
							Sko i Brands
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/maerker/puma/herre/sko/sko">
							Sko i Brands
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/dame/sko">
							Sko i Dame
						</a>
					</li>
					<li>
						<a class="search-suggestion-left-panel-hitgroup-link" href="/koen/boern/pige/sko">
							Sko i Gender
						</a>
					</li>
				</ul>
				
				<ul>
					<li class="category">
						Popul&aelig;re s&oslash;gninger
					</li>
					<li>
						<a class="search-suggestion-normal-link" href="/soegning?q=Sko">Sko</a>
					</li>
					<li>
						<a class="search-suggestion-normal-link" href="/soegning?q=Sloggi%20zero%20feel">Sloggi zero feel</a>
					</li>
				</ul>
				
				<ul>
					<li class="category">
					Ajour
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=skolestart">
					Smart skolestart
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=skoguide_angulus">
					9 tips til dit barns<em>VINTERST&#216;VLER</em>
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=Skoenne_spiseoplevelser">
					Sk&#248;nne spiseoplevelser
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=Top-fem-skoenheds-musthaves">
					Top fem<em>beauty-musthaves</em>
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=Vaelg_skoene_foerst">
					Derfor skal du altid<em>v&#230;lge skoene f&#248;rst</em>
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=made_for_walkin">
					These Boots are Made for Walkin’<em></em>
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=Portraet_ruggedgear">
					<em>3 hurtige til&#160;</em>Rugged Gear
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=julenslillehjaelper_ps">
					Personlige Shoppere
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=Find_dit_stilfulde_look">
					Find dit eget<em>Stilfulde look</em>
					</a>
					</li>
					<li>
					<a href="/ajour?article=true&amp;cid=the_right_suit">
					The right<em>&#160;suit&#160;</em>
					</a>
					</li>
				</ul>

				<div class="products">
					<div class="category">
						<p>PRODUKTER</p>
					</div>
					<div class="productitemcontainer" id="VA04774466-00178424_061">
						<div onclick="gtm.googleAnalytics.analyticsProductListClick('VA04774466-00178424_061', this)" data-itemid="VA04774466-00178424_061">


							<div class="productitem" id="cd91d9f1b2bf220b1c77f761a0" onclick="gtm.googleAnalytics.analyticsProductListClick( 'VA04774466-00178424_061', this )" data-masterid="VN04774466" data-itemid="VA04774466-00178424_061" data-producturl="https://www.magasin.dk/m2s-lap01-amlux/VA04774466-00178424_061.html">
								<div class="productimg">
									<div class="image thumbnail">
										<a href="https://www.magasin.dk/m2s-lap01-amlux/VA04774466-00178424_061.html" title="Paul Smith M2S-LAP01-AMLUX">
											<img  src="https://www.magasin.dk/dw/image/v2/AAJU_PRD/on/demandware.static/-/Sites-mdn-master-catalog/default/dwd8e08bbc/images/highres/5057613210048.jpg?sw=106&sh=130&sm=fit"  alt="Paul Smith M2S-LAP01-AMLUX" title="Paul Smith M2S-LAP01-AMLUX"     />
										</a>
									</div>
								</div>
								<div class="product-text-container">
									<div class="producttext producttext-truncated">
										<div class="wishlist-wishbutton-container " id="ProductListGridHeart_VN04774466" list-id="null" data-id="VN04774466"  style="display:none;" data-replacetext="" >
											<div class="wishlist-wishbutton-listmenu">
												<div class="wishlist-wishbutton-backlight">
												</div>
												<div class="product-list-heart symbol-heart" id="" list-id="null" data-id="VN04774466" onclick="event.stopPropagation();app.productList.heart.updateProduct('VN04774466', this, 'null')" >
												</div>
											</div>
										</div>
										<a href="https://www.magasin.dk/m2s-lap01-amlux/VA04774466-00178424_061.html" title="M2S-LAP01-AMLUX" >
											<span class="productname">Paul Smith</span>
											<div>M2S-LAP01-AMLUX</div>
										</a>
									</div>
									<div class="productprice">
										<b> 1.400</b>
										<span>kr</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="productitemcontainer" id="VA03482413-07693629_061">
						<div onclick="gtm.googleAnalytics.analyticsProductListClick('VA03482413-07693629_061', this)" data-itemid="VA03482413-07693629_061">
							<div class="productitem" id="ad3e551bfc5a1ceba27e2a0030" onclick="gtm.googleAnalytics.analyticsProductListClick( 'VA03482413-07693629_061', this )" data-masterid="VN03482413" data-itemid="VA03482413-07693629_061" data-producturl="https://www.magasin.dk/helsinki-sko/VA03482413-07693629_061.html">
								<div class="productimg">
									<div class="image thumbnail">
										<a href="https://www.magasin.dk/helsinki-sko/VA03482413-07693629_061.html" title="ECCO Helsinki sko">
											<img  src="https://www.magasin.dk/dw/image/v2/AAJU_PRD/on/demandware.static/-/Sites-mdn-master-catalog/default/dwc4f7ada9/images/highres/737427865690.jpg?sw=106&sh=130&sm=fit"  alt="ECCO Helsinki sko" title="ECCO Helsinki sko"     />
										</a>
									</div>
								</div>
								<div class="product-text-container">
									<div class="producttext producttext-truncated">
										<div class="wishlist-wishbutton-container " id="ProductListGridHeart_VN03482413" list-id="null" data-id="VN03482413"  style="display:none;" data-replacetext="" >
											<div class="wishlist-wishbutton-listmenu">
												<div class="wishlist-wishbutton-backlight"></div>
												<div class="product-list-heart symbol-heart" id="" list-id="null" data-id="VN03482413" onclick="event.stopPropagation();app.productList.heart.updateProduct('VN03482413', this, 'null')" ></div>
											</div>
										</div>
										<a href="https://www.magasin.dk/helsinki-sko/VA03482413-07693629_061.html" title="Helsinki sko" >
											<span class="productname">ECCO</span>
											<div>Helsinki sko</div>
										</a>
									</div>
									<div class="productprice">
										<b>950</b>
										<span>kr</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="productitemcontainer" id="VA03482414-07693629_061">
						<div onclick="gtm.googleAnalytics.analyticsProductListClick('VA03482414-07693629_061', this)" data-itemid="VA03482414-07693629_061">
							<div class="productitem" id="57e14a23a18c14c37ccb25c5e6" onclick="gtm.googleAnalytics.analyticsProductListClick( 'VA03482414-07693629_061', this )" data-masterid="VN03482414" data-itemid="VA03482414-07693629_061" data-producturl="https://www.magasin.dk/helsinki-sko/VA03482414-07693629_061.html">
								<div class="productimg">
									<div class="image thumbnail">
										<a href="https://www.magasin.dk/helsinki-sko/VA03482414-07693629_061.html" title="ECCO Helsinki sko">
											<img  src="https://www.magasin.dk/dw/image/v2/AAJU_PRD/on/demandware.static/-/Sites-mdn-master-catalog/default/dwf7c9e386/images/highres/737427865928.jpg?sw=106&sh=130&sm=fit"  alt="ECCO Helsinki sko" title="ECCO Helsinki sko"     />
										</a>
									</div>
								</div>
								<div class="product-text-container">
									<div class="producttext producttext-truncated">
										<div class="wishlist-wishbutton-container " id="ProductListGridHeart_VN03482414" list-id="null" data-id="VN03482414"  style="display:none;" data-replacetext="" >
											<div class="wishlist-wishbutton-listmenu">
												<div class="wishlist-wishbutton-backlight"></div>
												<div class="product-list-heart symbol-heart" id="" list-id="null" data-id="VN03482414" onclick="event.stopPropagation();app.productList.heart.updateProduct('VN03482414', this, 'null')" ></div>
											</div>
										</div>
										<a href="https://www.magasin.dk/helsinki-sko/VA03482414-07693629_061.html" title="Helsinki sko" >
											<span class="productname">ECCO</span>
											<div>Helsinki sko</div>
										</a>
									</div>
									<div class="productprice">
										<b>950</b>
										<span>kr</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="productitemcontainer" id="VA03408199-05039089_061">
						<div onclick="gtm.googleAnalytics.analyticsProductListClick('VA03408199-05039089_061', this)" data-itemid="VA03408199-05039089_061">
							<div class="productitem" id="14db02bdf5fe122d3a37baf3db" onclick="gtm.googleAnalytics.analyticsProductListClick( 'VA03408199-05039089_061', this )" data-masterid="VN03408199" data-itemid="VA03408199-05039089_061" data-producturl="https://www.magasin.dk/prindo-sko/VA03408199-05039089_061.html">
								<div class="productimg">
									<div class="image thumbnail">
										<a href="https://www.magasin.dk/prindo-sko/VA03408199-05039089_061.html" title="BOSS Prindo sko">
											<img  src="https://www.magasin.dk/dw/image/v2/AAJU_PRD/on/demandware.static/-/Sites-mdn-master-catalog/default/dw4c43c905/images/highres/4021419214174.jpg?sw=106&sh=130&sm=fit"  alt="BOSS Prindo sko" title="BOSS Prindo sko"     />
										</a>
									</div>
								</div>
								
								<div class="product-text-container">
									<div class="producttext producttext-truncated">
										<div class="wishlist-wishbutton-container " id="ProductListGridHeart_VN03408199" list-id="null" data-id="VN03408199"  style="display:none;" data-replacetext="" >
											<div class="wishlist-wishbutton-listmenu">
												<div class="wishlist-wishbutton-backlight"></div>
												<div class="product-list-heart symbol-heart" id="" list-id="null" data-id="VN03408199" onclick="event.stopPropagation();app.productList.heart.updateProduct('VN03408199', this, 'null')" ></div>
											</div>
										</div>
										<a href="https://www.magasin.dk/prindo-sko/VA03408199-05039089_061.html" title="Prindo sko" >
											<span class="productname">BOSS</span>
											<div>Prindo sko</div>
										</a>
									</div>
									<div class="productprice">
										<span class="beforeprice">
											<b>2.299</b>
											<span>kr</span>
										</span>
										<b>1.609</b>
										<span>kr</span>
									</div>
								</div>

							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	
	</div>
</div>
Se mere