input type=search, datalist und action

[beatovich]

hallo

https://beat-stoecklin.ch/nav_demo.html

Enthält nun eine neue Suchformular-Komponente als js.datei

• Links können im JS selbst angegeben werden (es operiert also als self-contained Site navigation)
• Zudem werden Links in der jeweiligen Seite mit aufgenommen.
• Es kann eine explizite Suchseite angegeben werden.
• fehlt diese, wird das Formular nur ausgeführt, wenn explizit ein Eintrag aus der datalist verwendet wird
• ach ja, datalist verlangt natürlich nach einem polyfill. Dieses fehlt hier noch.

Eventuell könnt ich ja generell den Einbau von einem implementierten datalist abhängig machen.

Zukunftsmusik: eigentlich sollt eine sitemap als Quelle für die datalist verwendet werden.

Ich nehme wie immer Bugs entgegen.

// USAGE
//
// insert this Code, where you want the form to appear
//   <div hidden id="searchPages" data-searchUri=""></div>
//
// embed the script
//   <script src="js/searchPages.js"></script>	


var submitSearchPage =( function(){

var searchPages={
	defs: [
		["pub/kontakt.html" , "Kontakt Email"],
		["pub/kontakt.html#impressum" , "Impressum Datenschutz"],
		["pub/musik-gitarrenunterricht-laufental.html" , "Musik Gitarrenunterricht"],
		["https://wiki.selfhtml.org/wiki/Benutzer:Beatovich" , "SelfHtml Bugreport"],
		["klapperlogic.html" , "Javascript Klapper-Logic"],
		["/" , "Home"]
	],
	searchUri:false,
	form : '<label tabindex="0" for="fsearch" aria-label="Suche" title="Suche">🔍</label>\
	<form class="search" onsubmit="submitSearchPage(event, this)">\
		<input id="fsearch" type="search" list="searchPages" placeholder="🔍">\
		<datalist id="searchPages"></datalist>\
		<button aria-label="Suche starten" type="submit">🔍</button>\
	</form>',
	uri: {},
};

function submitSearchPage(ev, form){
	var url = document.getElementById('fsearch').value;
	if(searchPages.uri[url] != undefined){
		form.action=url;
	}
	else if(searchPages.searchUri){
		form.action = searchPages.searchUri+"?"+url;
	}
	else{
		ev.preventDefault();
		return false;
	}
}
function initSearchPages(){
	searchPages.root = document.getElementById("searchPages");
	if(! searchPages.root) return;
	if(searchPages.root.dataset.searchUri != undefined){
		searchPages.searchUri = searchPages.root.dataset.searchUri;
	}
	searchPages.root.outerHTML=searchPages.form;
	searchPages.links=document.querySelectorAll("a[href]");
	for(var i=0; i < searchPages.links.length; i++){
		if(! searchPages.links[i].href.match('#') )	searchPages.defs.push( [ searchPages.links[i].href , searchPages.links[i].innerText ] );
	}
	searchPages.datalist=document.getElementById("searchPages");
	for(var i=0; i < searchPages.defs.length; i++){
		var el= document.createElement("option");
		el.value=searchPages.defs[i][0];
		el.innerText=searchPages.defs[i][1];
		searchPages.uri[ searchPages.defs[i][0] ] = searchPages.defs[i][1] ;
		searchPages.datalist.append(el);
	}
}
document.addEventListener('DOMContentLoaded', initSearchPages, false);

return submitSearchPage;

})();