(refs #1340)Add dropdown filter

Because the large dropdown list makes  impossible to choose items below the screen.

src/main/twirl/gitbucket/core/helper/branchcontrol.scala.html

@@ -7,7 +7,7 @@
   prefix = if(branch.length == 40) "tree" else if(repository.branchList.contains(branch)) "branch" else "tree"
 ) {
   <li><div id="branch-control-title">Switch branches<button id="branch-control-close" class="pull-right">&times</button></div></li>
-  <li><input id="branch-control-input" type="text" class="form-control input-sm" placeholder="Find or create branch ..."/></li>
+  <li><input id="branch-control-input" type="text" class="form-control input-sm dropdown-filter-input" placeholder="Find or create branch ..."/></li>
   @body
   @if(hasWritePermission) {
     <li id="create-branch" style="display: none;">

src/main/twirl/gitbucket/core/helper/dropdown.scala.html

@@ -1,7 +1,8 @@
 @(value : String  = "",
   prefix: String  = "",
   style : String  = "",
-  right : Boolean = false)(body: Html)
+  right : Boolean = false,
+  filter: String = "")(body: Html)
 <div class="btn-group" @if(style.nonEmpty){style="@style"}>
   <button
       class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
@@ -16,6 +17,28 @@
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu@if(right){ pull-right}">
+    @if(filter.nonEmpty) {
+      <li><input id="@filter-input" type="text" class="form-control input-sm dropdown-filter-input" placeholder="Filter"/></li>
+    }
     @body
   </ul>
 </div>
+@if(filter.nonEmpty) {
+<script>
+$(function(){
+  $('#@{filter}-input').parent().click(function(e) {
+    e.stopPropagation();
+  });
+  $('#@{filter}-input').keyup(function() {
+    var inputVal = $('#@{filter}-input').val();
+    $.each($('#@{filter}-input').parent().parent().find('a'), function(index, elem) {
+      if (!inputVal || !elem.text.trim() || elem.text.trim().lastIndexOf(inputVal, 0) >= 0) {
+        $(elem).parent().show();
+      } else {
+        $(elem).parent().hide();
+      }
+    });
+  });
+});
+</script>
+}

src/main/twirl/gitbucket/core/issues/issue.scala.html

@@ -59,7 +59,7 @@
     </div>
   }
 }
-<script><script>
+<script>
 $(function(){
   $('#edit').click(function(){
     $('.edit-title').show();

src/main/twirl/gitbucket/core/issues/issueinfo.scala.html

@@ -11,7 +11,7 @@
   <span class="muted small strong">Labels</span>
   @if(isManageable){
     <div class="pull-right">
-      @gitbucket.core.helper.html.dropdown("Edit", right = true) {
+      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = "labels") {
         @labels.map { label =>
           <li>
             <a href="#" class="toggle-label" data-label-id="@label.labelId">
@@ -36,7 +36,7 @@
   <span class="muted small strong">Milestone</span>
   @if(isManageable){
     <div class="pull-right">
-      @gitbucket.core.helper.html.dropdown("Edit", right = true) {
+      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = "milestone") {
         <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="octicon octicon-x"></i> Clear this milestone</a></li>
         @milestones.filter(_._1.closedDate.isEmpty).map { case (milestone, _, _) =>
           <li>
@@ -88,7 +88,7 @@
   <span class="muted small strong">Assignee</span>
   @if(isManageable){
     <div class="pull-right">
-      @gitbucket.core.helper.html.dropdown("Edit", right = true) {
+      @gitbucket.core.helper.html.dropdown("Edit", right = true, filter = "assignee") {
         <li><a href="javascript:void(0);" class="assign" data-name=""><i class="octicon octicon-x"></i> Clear assignee</a></li>
         @collaborators.map { collaborator =>
           <li>

src/main/webapp/assets/common/css/gitbucket.css

@@ -326,6 +326,12 @@ div.account-image {
   margin-bottom: 8px;
 }
 
+.dropdown-filter-input {
+  border: solid 1px #ccc;
+  margin: 4px;
+  width: 96%;
+}
+
 ul.dropdown-menu {
   padding: 2px 0;
 }
@@ -338,7 +344,7 @@ ul.dropdown-menu li a {
   padding: 2px 10px;
 }
 
-ul.dropdown-menu :last-child {
+ul.dropdown-menu li:last-child {
   border-bottom: none;
 }
 
@@ -632,12 +638,6 @@ span.simplified-path {
   line-height: 15px;
 }
 
-#branch-control-input {
-  border: solid 1px #ccc;
-  margin: 4px;
-  width: 96%;
-}
-
 .new-branch-name {
   font-weight: bold;
   font-size: 1.2em;