search flyout placeholder

dashboard-ui/css/librarybrowser.css

@@ -113,7 +113,7 @@
 }
 
     .detailPageName + .detailPageName {
-        margin: 0 0 .3em;
+        margin: 0;
     }
 
 .detailPageParentLink {

dashboard-ui/css/search.css

@@ -0,0 +1,89 @@
+.headerSearch {
+    display: none;
+    margin-right: 3em;
+}
+
+.txtSearch {
+    vertical-align: middle;
+    font: 16px arial,sans-serif;
+    height: 28px;
+    margin: 0 .15em 0 0;
+    width: 150px;
+}
+
+.searchHints {
+    width: 148px;
+    color: #000;
+    font-family: Arial;
+}
+
+.btnSearch {
+    vertical-align: middle;
+    background-color: #4d90fe;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
+    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: linear-gradient(top,#4d90fe,#4787ed);
+    border: 1px solid #3079ed;
+    color: #fff!important;
+    margin: 0 0;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    font-weight: bold;
+    height: 28px;
+    min-width: 54px;
+    padding: 0 8px;
+    text-align: center;
+    text-decoration: none !important;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    text-align: center;
+}
+
+    .btnSearch img {
+        height: 28px;
+        margin: 0 auto;
+        border: 0;
+    }
+
+.searchHints {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    position: absolute;
+    z-index: 999;
+}
+
+.searchHintsContent {
+    padding: 10px;
+}
+
+@media all and (min-width: 650px) {
+
+    .headerSearch {
+        display: inline-block;
+    }
+}
+
+@media all and (min-width: 750px) {
+
+    .txtSearch {
+        width: 200px;
+    }
+
+    .searchHints {
+        width: 198px;
+    }
+}
+
+@media all and (min-width: 850px) {
+    .txtSearch {
+        width: 250px;
+    }
+
+    .searchHints {
+        width: 248px;
+    }
+}

dashboard-ui/css/site.css

@@ -26,6 +26,10 @@
     src: local("Open Sans"), local("OpenSans"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
 }
 
+* {
+    text-shadow: none!important;
+}
+
 body {
     overflow-y: scroll!important;
 }
@@ -125,53 +129,6 @@ pre, textarea.pre {
     right: 10px;
 }
 
-.headerSearch {
-    display: none;
-    margin-right: 3em;
-}
-
-.txtSearch {
-    width: 150px;
-    vertical-align: middle;
-    font: 16px arial,sans-serif;
-    height: 23px;
-    line-height: 23px;
-    margin: 0 .15em 0 0;
-}
-
-.btnSearch {
-    vertical-align: middle;
-    background-color: #4d90fe;
-    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
-    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
-    background-image: linear-gradient(top,#4d90fe,#4787ed);
-    border: 1px solid #3079ed;
-    color: #fff!important;
-    margin: 0 0;
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    font-weight: bold;
-    height: 29px;
-    line-height: 29px;
-    min-width: 54px;
-    padding: 0 8px;
-    text-align: center;
-    text-decoration: none !important;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    text-align: center;
-}
-
-.btnSearch img {
-    height: 29px;
-    margin: 0 auto;
-    border: 0;
-}
-
 .header .imageLink {
     display: inline-block;
 }
@@ -312,10 +269,6 @@ form, .readOnlyContent {
 
 @media all and (min-width: 650px) {
 
-    .headerSearch {
-        display: inline-block;
-    }
-
     .imgLogoIcon {
         height: 50px;
     }
@@ -366,10 +319,6 @@ form, .readOnlyContent {
 
 @media all and (min-width: 750px) {
 
-    .txtSearch {
-        width: 200px;
-    }
-
     .imgLogoText {
         height: 50px;
         display: inline;
@@ -384,13 +333,6 @@ form, .readOnlyContent {
     }
 }
 
-@media all and (min-width: 850px) {
-    .txtSearch {
-        width: 250px;
-    }
-
-}
-
 @media all and (min-width: 1200px) {
 
 

dashboard-ui/scripts/search.js

@@ -0,0 +1,87 @@
+(function ($, document, window) {
+
+
+    function createSearchHintsElement() {
+
+        $(document.body).append('<div id="searchHints" class="searchHints"><div class="searchHintsContent">Coming soon<div><div>').off("mousedown.hidesearchhints").on("mousedown.hidesearchhints", function (e) {
+
+            var elem = $(e.target);
+
+            if (!elem.is('#searchHints,#txtSearch,#btnSearch') && !elem.parents('#searchHints,#txtSearch,#btnSearch').length) {
+
+                $('#searchHints').remove();
+
+                $(document.body).off("mousedown.hidesearchhints");
+            }
+
+        });
+
+        var txtElem = $('#txtSearch');
+        var pos = txtElem.offset();
+        
+        var hints = $('#searchHints')[0];
+
+        hints.style.top = txtElem[0].offsetHeight + pos.top + 1 + "px";
+        hints.style.left = pos.left + "px";
+
+    }
+
+    function renderSearchHints(searchTerm) {
+
+        var hints = $('#searchHints');
+
+        if (!hints.length) {
+
+            hints = createSearchHintsElement();
+        }
+    }
+
+    function search() {
+
+        var self = this;
+
+        self.getSearchHtml = function () {
+
+            var html = '<div class="headerSearch"><form id="searchForm" name="searchForm">';
+
+            html += '<input id="txtSearch" class="txtSearch" type="search" required="required" />';
+
+            html += '<button id="btnSearch" class="btnSearch" type="submit">';
+            html += '<img src="css/images/searchbutton.png" />';
+            html += '</button>';
+
+            html += '</form></div>';
+
+            return html;
+        };
+
+        self.onSearchRendered = function (parentElem) {
+
+
+            $('#searchForm', parentElem).on("submit", function () {
+
+                Dashboard.alert('Coming soon.');
+
+                return false;
+            });
+
+            $('#txtSearch', parentElem).on("keypress", function () {
+
+                renderSearchHints(this.value);
+
+            }).on("focus", function () {
+
+                var value = this.value;
+                
+                if (value) {
+                    renderSearchHints(value);
+                }
+
+            });
+
+        };
+    }
+
+    window.Search = new search();
+
+})(jQuery, document, window);

dashboard-ui/scripts/site.js

@@ -696,7 +696,7 @@ var Dashboard = {
 
         if (user && !page.hasClass('wizardPage')) {
 
-            headerHtml += Dashboard.getSearchHtml();
+            headerHtml += Search.getSearchHtml();
 
             headerHtml += '<a class="imageLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout();"><span class="currentUsername">' + user.Name + '</span>';
 
@@ -724,7 +724,7 @@ var Dashboard = {
 
         header.append(headerHtml);
 
-        $('#searchForm', header).on("submit", Dashboard.onSearchSubmit);
+        Search.onSearchRendered(header);
 
         Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
             if (pluginSecurityInfo.IsMBSupporter) {
@@ -733,28 +733,6 @@ var Dashboard = {
         });
     },
     
-    onSearchSubmit: function() {
-
-        Dashboard.alert('Coming soon.');
-
-        return false;
-    },
-    
-    getSearchHtml: function() {
-
-        var html = '<div class="headerSearch"><form id="searchForm" name="searchForm">';
-
-        html += '<input class="txtSearch" type="text" />';
-        
-        html += '<button class="btnSearch" type="submit">';
-        html += '<img src="css/images/searchbutton.png" />';
-        html += '</button>';
-
-        html += '</form></div>';
-
-        return html;
-    },
-
     ensureToolsMenu: function (page) {
 
         if (!page.hasClass('type-interior')) {