diff --git a/public/js/index.js b/public/js/index.js
index aeb0e64ed..a77b9c5b9 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1590,6 +1590,7 @@ $(document).ready(function () {
     initTeamSettings();
     initCtrlEnterSubmit();
     initNavbarContentToggle();
+    initIssueList();
 
     // Repo clone url.
     if ($('#repo-clone-url').length > 0) {
@@ -2133,33 +2134,26 @@ function deleteDependencyModal(id, type) {
     ;
 }
 
-function buildIssuesList() {
-    // Get a list of issues
+function initIssueList() {
     var repolink = $('#repolink').val();
-    var issueIndex = $('#issueIndex').val();
+    $('.new-dependency-drop-list')
+        .dropdown({
+            apiSettings: {
+                url: '/api/v1/repos' + repolink + '/issues?q={query}',
+                onResponse: function(response) {
+                    var filteredResponse = {'success': true, 'results': []};
+                    // Parse the response from the api to work with our dropdown
+                    $.each(response, function(index, issue) {
+                        filteredResponse.results.push({
+                            'name'  : '#' + issue.number + ' ' + issue.title,
+                            'value' : issue.id
+                        });
+                    });
+                    return filteredResponse;
+                },
+            },
 
-    if(repolink !== undefined) {
-        $.getJSON('/api/v1/repos' + repolink + '/issues', function (data) {
-
-            $.each(data, function (i, issue) {
-                if (issue.number != issueIndex) {
-                    $('.new-dependency-dropdown').append('<div class="item" data-value="' + issue.id + '"><b>#' + issue.number + '</b> ' + issue.title + '</div>');
-                }
-            });
-
-            $('.new-dependency-drop-list').dropdown({
-                fullTextSearch: true
-            });
-        });
-    }
+            fullTextSearch: true
+        })
+    ;
 }
-
-var buildIssuesListOnce = (function() {
-    var executed = false;
-    return function() {
-        if (!executed) {
-            executed = true;
-            buildIssuesList();
-        }
-    };
-})();
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 3d9942223..a78fecba1 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -278,13 +278,11 @@
 						<form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/dependency/add" id="addDependencyForm">
 							{{$.CsrfTokenHtml}}
 							<div class="ui fluid action input">
-								<div class="ui search selection dropdown new-dependency-drop-list" style="min-width: 13.9rem;border-radius: 4px 0 0 4px;border-right: 0;white-space: nowrap;" onclick="buildIssuesListOnce();">
+								<div class="ui search selection dropdown new-dependency-drop-list" style="min-width: 13.9rem;border-radius: 4px 0 0 4px;border-right: 0;white-space: nowrap;">
 									<input name="newDependency" type="hidden">
 									<i class="dropdown icon"></i>
+									<input type="text" class="search">
 									<div class="default text">{{.i18n.Tr "repo.issues.dependency.add"}}</div>
-									<div class="menu new-dependency-dropdown">
-
-									</div>
 								</div>
 								<button class="ui green icon button">
 									<i class="plus icon"></i>
@@ -298,7 +296,7 @@
 </div>
 {{if .CanCreateIssueDependencies}}
 	<input type="hidden" id="repolink" value="{{$.RepoLink}}">
-	<!-- I know, there is probably a better way to do this -->
+	<!-- I know, there is probably a better way to do this  onclick="buildIssuesListOnce();" -->
 	<input type="hidden" id="issueIndex" value="{{.Issue.Index}}"/>
 
 	<div class="ui basic modal remove-dependency">