https://traineeshipsoverzicht.nl/static/CACHE/js/output.f7a961d0773b.js

1function handleSearchInput(searchInput,searchDropdown,searchBar,searchItems,overlay){let selectedIndex=0;let dropdownItems=[];const query=searchInput.value.trim().toLowerCase();searchDropdown.innerHTML="";const semanticItem=createSemanticSearchItem(searchInput.value,searchDropdown,overlay);semanticItem.addEventListener("mouseover",()=>{dropdownItems[selectedIndex].updateSelection(false);selectedIndex=0;semanticItem.updateSelection(true);});searchDropdown.appendChild(semanticItem);if(query!==""){searchBar.style.borderBottomLeftRadius="0";searchBar.style.borderBottomRightRadius="0";searchDropdown.classList.remove("hidden");const filteredItems=searchItems.filter((item)=>{return(typeof item.text==="string"&&item.text.toLowerCase().includes(query));});if(filteredItems.length>0){filteredItems.forEach((item,index)=>{const dropdownItem=createDropdownItem(item,query);dropdownItem.addEventListener("mouseover",()=>{dropdownItems[selectedIndex].updateSelection(false);selectedIndex=index+1;dropdownItem.updateSelection(true);});searchDropdown.appendChild(dropdownItem);});}
2dropdownItems=Array.from(searchDropdown.children);if(dropdownItems.length>0){dropdownItems[0].updateSelection(true);}}else{searchBar.style.borderBottomLeftRadius="";searchBar.style.borderBottomRightRadius="";searchDropdown.classList.add("hidden");}
3searchInput.addEventListener("keydown",(e)=>{if(dropdownItems.length>0){if(e.key==="ArrowDown"){e.preventDefault();dropdownItems[selectedIndex].updateSelection(false);if(selectedIndex<dropdownItems.length-1){selectedIndex++;}
4dropdownItems[selectedIndex].updateSelection(true);dropdownItems[selectedIndex].scrollIntoView({block:"nearest",behavior:"smooth",});}else if(e.key==="ArrowUp"){e.preventDefault();if(selectedIndex>0){dropdownItems[selectedIndex].updateSelection(false);selectedIndex--;dropdownItems[selectedIndex].updateSelection(true);dropdownItems[selectedIndex].scrollIntoView({block:"nearest",behavior:"smooth",});}}else if(e.key==="Enter"){e.preventDefault();if(selectedIndex>0){const selectedItem=dropdownItems[selectedIndex];if(selectedItem){selectedItem.select();}}else{const safeQuery=encodeURIComponent(query);window.location.href=`/vacatures?query=${safeQuery}`;}}}});}
5function createDropdownItem(item,query){const dropdownItem=document.createElement("div");dropdownItem.className="group flex items-center px-4 h-9 py-1 justify-between cursor-pointer";const valueSpan=document.createElement("span");const categorySpan=document.createElement("span");const regex=new RegExp(`(${query})`,"gi");valueSpan.innerHTML=item.text.replace(regex,(match)=>`<b>${match}</b>`);categorySpan.className="text-xs font-light text-gray-500";categorySpan.textContent=item.category;dropdownItem.appendChild(valueSpan);dropdownItem.appendChild(categorySpan);dropdownItem.select=()=>{window.location.href=`/vacatures/${item.url}`;};dropdownItem.addEventListener("click",()=>{dropdownItem.select();});dropdownItem.updateSelection=(isSelected)=>{if(isSelected){dropdownItem.classList.add("bg-blue-700","text-white");categorySpan.classList.add("text-white");}else{dropdownItem.classList.remove("bg-blue-700","text-white");categorySpan.classList.remove("text-white");}};return dropdownItem;}
6function createSemanticSearchItem(input,searchDropdown,overlay){const dropdownItem=document.createElement("div");dropdownItem.className="group flex items-center px-4 h-9 py-1 justify-between cursor-pointer";const valueSpan=document.createElement("span");valueSpan.textContent=input;const categorySpan=document.createElement("span");categorySpan.className="text-xs font-light flex items-center text-blue-500 gap-x-3";categorySpan.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
7              class="bi bi-stars" viewBox="0 0 16 16">
8              <path
9                d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936

9a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
10            </svg>
11            Semantic Search`;dropdownItem.appendChild(valueSpan);dropdownItem.appendChild(categorySpan);dropdownItem.addEventListener("click",()=>{searchDropdown.classList.add("hidden");overlay.classList.add("hidden");});dropdownItem.updateSelection=(isSelected)=>{if(isSelected){dropdownItem.classList.add("bg-blue-700","text-white");categorySpan.classList.add("text-white");}else{dropdownItem.classList.remove("bg-blue-700","text-white");categorySpan.classList.remove("text-white");}};return dropdownItem;}
12function initializeSearch(searchDataElement,searchInput,searchDropdown,searchBar,overlay){if(!searchDataElement){console.error("Search data element not found.");return;}
13try{const searchItems=[...(searchData.searchTypes||[]).map((item)=>({category:"in Types",text:item.text,url:item.slug,})),...(searchData.searchExpertises||[]).map((item)=>({category:"in Richtingen",text:item.text,url:item.slug,})),...(searchData.searchEducationLevels||[]).map((item)=>({category:"in Niveaus",text:item.text,url:item.slug,})),...(searchData.searchLocations||[]).map((item)=>({category:"in Locaties",text:item.text,url:`?location=${item.text}`,})),...(searchData.searchCompanies||[]).map((item)=>({category:"in Bedrijven",text:item.text,url:item.slug,})),...(searchData.searchJobTitles||[]).map((item)=>({category:"in Functies",text:item.text,url:`?query=${item.text}`,})),];searchInput.addEventListener("input",()=>{handleSearchInput(searchInput,searchDropdown,searchBar,searchItems,overlay);});}catch(error){console.error("Error parsing search data:",error);}}
14function setupOverlay(searchButtons,overlay,searchInput){searchButtons.forEach((button)=>{button.addEventListener("click",()=>{overlay.classList.remove("hidden");document.body.style.overflow="hidden";searchInput.focus();})})
15overlay.addEventListener("click",(event)=>{if(event.target===overlay){overlay.classList.add("hidden");document.body.style.overflow="";searchInput.value="";}});document.addEventListener("keydown",(e)=>{const activeElement=document.activeElement;if(activeElement.tagName==="INPUT"||activeElement.tagName==="TEXTAREA"||activeElement.isContentEditable){return;}
16if(e.metaKey||e.ctrlKey||e.altKey){return;}
17if(e.key.length===1&&/^[a-zA-Z]$/.test(e.key)){e.preventDefault();const searchOverlay=document.getElementById("overlay");const searchInput=document.getElementById("search-input");if(searchOverlay&&searchInput){searchOverlay.classList.remove("hidden");searchInput.value=e.key;const inputEvent=new Event("input",{bubbles:true});searchInput.dispatchEvent(inputEvent);searchInput.focus();}}});}
18document.addEventListener("DOMContentLoaded",()=>{const searchButtons=document.querySelectorAll(".search-button");const overlay=document.getElementById("overlay");const searchBar=document.getElementById("search-bar");const searchInput=document.getElementById("search-input");const searchDropdown=document.getElementById("search-dropdown");const searchDataElement=document.getElementById("search-data");initializeSearch(searchDataElement,searchInput,searchDropdown,searchBar,overlay);setupOverlay(searchButtons,overlay,searchInput);});;