Progress on search form

assets/css/components/searchForm.css

@@ -0,0 +1,18 @@
+/**
+ * Search form styles
+ *
+ * @author Pierre HUBERT
+ */
+
+.searchBoxResultsContainer {
+	position: relative;
+	overflow: hidden;
+	width: auto;
+	height: 200px;
+}
+
+.searchBoxResultsContainer .menu {
+	overflow: hidden;
+	width: 100%;
+	height: 200px;
+}

assets/js/components/menuBar/authenticated.js

@@ -124,7 +124,7 @@ ComunicWeb.components.menuBar.authenticated = {
 	addSearchForm: function(navbarElem){
 		//Create form element
 		var searchForm = createElem("li", navbarElem);
-		searchForm.className = "dropdown navbar-form navbar-left";
+		searchForm.className = "dropdown navbar-form navbar-left notifications-menu";
 		searchForm.setAttribute("role", "search");
 
 		//Create form group
@@ -138,5 +138,11 @@ ComunicWeb.components.menuBar.authenticated = {
 		searchInput.type = "text";
 		searchInput.id = "navbar-search-input";
 
+		//Create dropdown container
+		var dropdownContainer = createElem("ul", searchForm);
+		dropdownContainer.className = "dropdown-menu";
+
+		//Initializate menu
+		ComunicWeb.components.searchForm.init(searchInput, dropdownContainer);
 	}
 };

assets/js/components/searchForm/searchForm.js

@@ -8,7 +8,74 @@ ComunicWeb.components.searchForm = {
 	/**
 	 * Initializate a search form element
 	 * 
-	 * @param {HTMLElement}
+	 * @param {HTMLElement} textInput The text input node
+	 * @param {HTMLElement} searchResultBox The target of the results
+	 * @return {Boolean} True for a success
 	 */
+	init: function(textInput, searchResultBox){
+		//Log action
+		ComunicWeb.debug.logMessage("Initializate search menu");
 
+		//Create header
+		var searchHeader = createElem("li", searchResultBox);
+		searchHeader.className = "header";
+		searchHeader.innerHTML = "Search results";
+
+		//Box core
+		var searchBoxCore = createElem("li", searchResultBox);
+		var searchBoxContainer = createElem("div", searchBoxCore);
+		searchBoxContainer.className = "searchBoxResultsContainer";
+		
+		//Create menu list
+		var menuList = createElem("ul", searchBoxContainer);
+		menuList.className = "menu";
+
+		//Enable slimscroll
+		/*$(menuList).slimScroll({
+			height: '200px',
+		}));*/
+
+		//Create footer
+		var searchFooter = createElem("li", searchResultBox);
+		searchFooter.className = "footer";
+
+		//Footer link
+		var footerLink = createElem("a", searchFooter);
+		footerLink.innerHTML = "See more results";
+		footerLink.onclick = function(){
+			openPage("search?q=" + this.getAttribute("data-searchValue"));
+		}
+
+		//Make input text lives
+		textInput.onkeyup = function(){
+			ComunicWeb.components.searchForm.ontextchange(textInput, searchResultBox, searchBoxContainer, footerLink);
+		}
+
+		return true;
+	},
+
+	/**
+	 * What to do on text change
+	 * 
+	 * @param {HTMLElement} textInput The text input node
+	 * @param {HTMLElement} searchResultBox The main search box
+	 * @param {HTMLElement} searchBoxContainer The target of the results
+	 * @param {HTMLElement} footerLink The footer element
+	 * @return {Boolean} True for a success
+	 */
+	ontextchange: function(textInput, searchResultBox, searchBoxContainer, footerLink){
+		//We check if the text was removed
+		if(textInput.value == ""){
+			//Text was removed
+			//Hide box
+			searchResultBox.style.display = "none";
+			return true;
+		}
+
+		//We show the box
+		searchResultBox.style.display = "block";
+
+		//Change "see more result" value
+		footerLink.setAttribute("data-searchValue", textInput.value);
+	},
 }

corePage/config/dev.config.php

@@ -24,6 +24,7 @@ $config['CSSfiles'] = array(
 
     //Components stylesheets
     "%PATH_ASSETS%css/components/menuBar.css",
+    "%PATH_ASSETS%css/components/searchForm.css",
 );
 
 //JS files to include (at the end of the page)