add language to ajax and typeahead

templates/Froxlor/src/js/components/search.js

@@ -0,0 +1,30 @@
+$(document).ready(function () {
+	console.log('included search');
+
+	$.typeahead({
+		input: '.js-typeahead-search_v1',
+		order: "desc",
+		dynamic: true,
+		display: ['data.title'],
+		href: "{{url}}",
+		emptyTemplate: "No results for {{query}}",
+		debug: true,
+		source: {
+			settings: {
+				ajax: {
+					method: "post",
+					url: "lib/ajax.php?action=searchsetting&theme=" + window.$theme + "&s=" + window.$session,
+					path: "title",
+					data: {
+						searchtext: '{{query}}'
+					},
+				}
+			},
+		},
+		callback: {
+			onInit: function (node) {
+				console.log('Typeahead Initiated');
+			}
+		}
+	});
+});

templates/Froxlor/src/js/main.js

@@ -1,8 +1,10 @@
 // load bootstrap
 import 'bootstrap';
+import 'jquery-typeahead/src/jquery.typeahead.css'
 
 // load jquery
-window.$ = window.jQuery = require('jquery');
+global.$ = require('jquery');
+require('jquery-typeahead');
 
 $(document).ready(function () {
 	window.$theme = 'Froxlor';
@@ -10,5 +12,6 @@ $(document).ready(function () {
 });
 
 // Load components
+require('./components/search')
 require('./components/newsfeed')
 require('./components/updatecheck')

templates/Froxlor/userarea.html.twig

@@ -30,6 +30,20 @@
 					<span class="navbar-toggler-icon"></span>
 				</button>
 			</div>
+			<form id="form-search_v1" name="form-search_v1">
+				<div class="typeahead__container">
+					<div class="typeahead__field">
+						<div class="typeahead__query">
+							<input class="js-typeahead-search_v1" name="search_v1[query]" placeholder="Search" autocomplete="off">
+						</div>
+						<div class="typeahead__button">
+							<button type="submit">
+								<i class="typeahead__search-icon"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</form>
 			<div class="collapse navbar-collapse justify-content-end px-3" id="navbar">
 				<ul class="navbar-nav align-items-center">
 					{% if userinfo.adminsession == 1 %}