From ec759ac8097143254256544dc2432f225521147e Mon Sep 17 00:00:00 2001 From: Adam Solove Date: Thu, 7 Jun 2012 17:14:46 -0400 Subject: [PATCH] When not showing search box, up/down arrows and searching still work. - The hidden search box is displayed off-screen instead of taken off the dom. - User can type a search, but instead of filtering the results, just highlight the first matching result. Signed-off-by: Igor Vaynberg --- select2.css | 6 ++++++ select2.js | 23 +++++++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/select2.css b/select2.css index f37f669000..457e65c4e0 100755 --- a/select2.css +++ b/select2.css @@ -144,6 +144,12 @@ Version: @@ver@@ Timestamp: @@timestamp@@ padding-right: 4px; } +.select2-container .select2-hide-search { + display: block; + position: absolute; + left: -10000px; +} + .select2-container .select2-search input { background: #fff url('select2.png') no-repeat 100% -22px; background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); diff --git a/select2.js b/select2.js index 47b23bfa09..1e6050aa07 100755 --- a/select2.js +++ b/select2.js @@ -735,6 +735,25 @@ var parts = [], // html parts def; // default choice + // If we aren't showing the search input, do not filter items + // but do highlight an item matching current search + if(initial !== true && !this.showSearchInput){ + if(data.results.length > 0){ + var key = data.results[0].id, + self = this; + this.results.find("li").each(function(i, li){ + if($(li).data("select2-data").id == key){ + self.highlight(i); + return false; + } + }); + } else { + // if the search doesn't match, reset so user can search again + search.val(""); + } + return; + } + // create a default choice and prepend it to the list if (this.opts.createSearchChoice && search.val() !== "") { def = this.opts.createSearchChoice.call(null, search.val(), data.results); @@ -1022,8 +1041,8 @@ // hide the search box if this is the first we got the results and there are a few of them if (initial === true) { - showSearchInput = data.results.length >= this.opts.minimumResultsForSearch; - this.search.parent().toggle(showSearchInput); + showSearchInput = this.showSearchInput = data.results.length >= this.opts.minimumResultsForSearch; + this.search.parent()[showSearchInput ? "removeClass" : "addClass"]("select2-hide-search"); //add "select2-with-searchbox" to the container if search box is shown this.container[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox");