https://github.com/NodeBB/NodeBB/issues/6928

templates/partials/category-filter.tpl

@@ -1,14 +1,17 @@
 <div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-        <!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
+        <!-- IF selectedCategory --><span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}<!-- ELSE -->
         [[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
     </button>
+    <div component="category-selector-search" class="hidden">
+        <input type="text" class="form-control" autocomplete="off">
+    </div>
     <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
         <li role="presentation" class="category">
             <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
         </li>
         <!-- BEGIN categories -->
-        <li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
+        <li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}" data-name="{categories.name}">
             <a role="menu-item" href="#"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
         </li>
         <!-- END categories -->

templates/partials/category-selector.tpl

@@ -2,7 +2,13 @@
 	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 		<span component="category-selector-selected">[[topic:thread_tools.select_category]]</span> <span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu category-dropdown-menu" role="menu">
+	<div component="category-selector-search" class="hidden">
+		<input type="text" class="form-control" autocomplete="off">
+	</div>
+	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+		<li component="category/no-matches" role="presentation" class="category hidden">
+			<a role="menu-item">[[search:no-matches]]</a>
+		</li>
 		<!-- BEGIN categories -->
 		<li role="presentation" class="category <!-- IF categories.disabledClass -->disabled<!-- ENDIF categories.disabledClass -->" data-cid="{categories.cid}" data-name="{categories.name}">
 			<a role="menu-item">{categories.level}<span component="category-markup"><!-- IF categories.icon --><span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span><!-- ENDIF categories.icon --> {categories.name}</span></a>