quick search

less/header.less

@@ -252,6 +252,17 @@
 			margin-left: -30px;
 		}
 	}
+	.quick-search-results {
+		max-width: 400px;
+		max-height: 500px;
+		overflow-x: hidden;
+		overflow-y: auto;
+		a {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden
+		}
+	}
 }
 
 .breadcrumb {

templates/partials/menu.tpl

@@ -171,12 +171,15 @@
 							<button id="search-button" type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
 							<div class="hidden" id="search-fields">
 								<div class="form-group">
-									<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+									<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 									<a href="#"><i class="fa fa-gears fa-fw advanced-search-link"></i></a>
 								</div>
 								<button type="submit" class="btn btn-default hide">[[global:search]]</button>
 							</div>
 						</form>
+						<ul id="quick-search-results" class="dropdown-menu quick-search-results hidden">
+							<!-- IMPORT partials/quick-search-results.tpl -->
+						</ul>
 					</li>
 					<li class="visible-xs" id="search-menu">
 						<a href="{relative_path}/search">

templates/partials/quick-search-results.tpl

@@ -0,0 +1,20 @@
+<!-- BEGIN posts -->
+<li>
+    <a href="/post/{posts.pid}">
+        <!-- IF posts.user.picture -->
+        <img title="{posts.user.username}" class="avatar avatar-sm avatar-rounded" src="{posts.user.picture}" />
+        <!-- ELSE -->
+        <span title="{posts.user.username}" class="avatar avatar-sm avatar-rounded" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</span>
+        <!-- ENDIF posts.user.picture -->
+        {posts.topic.title}
+
+    </a>
+</li>
+<!-- END posts -->
+<!-- IF multiplePages -->
+<li class="text-center">
+    <a href="{url}">
+        [[search:see-more-results]]
+    </a>
+</li>
+<!-- ENDIF multiplePages -->