From ec759ac8097143254256544dc2432f225521147e Mon Sep 17 00:00:00 2001 From: Adam Solove Date: Thu, 7 Jun 2012 17:14:46 -0400 Subject: [PATCH 1/7] 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 f37f6690..457e65c4 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 47b23bfa..1e6050aa 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"); From 47064b24837492b74ed65c3095414d77123e5cbe Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Thu, 7 Jun 2012 23:09:51 -0700 Subject: [PATCH 2/7] tweak to issue #85 do not highlight items based on keypresses --- select2.css | 2 +- select2.js | 26 ++++++-------------------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/select2.css b/select2.css index 457e65c4..e9bdce7a 100755 --- a/select2.css +++ b/select2.css @@ -144,7 +144,7 @@ Version: @@ver@@ Timestamp: @@timestamp@@ padding-right: 4px; } -.select2-container .select2-hide-search { +.select2-container .select2-search-hidden { display: block; position: absolute; left: -10000px; diff --git a/select2.js b/select2.js index 1e6050aa..25ec123c 100755 --- a/select2.js +++ b/select2.js @@ -712,6 +712,11 @@ updateResults: function (initial) { var search = this.search, results = this.results, opts = this.opts, self=this; + // if the search is currently hidden we do not alter the results + if (initial !== true && this.showSearchInput === false) { + return; + } + search.addClass("select2-active"); function render(html) { @@ -735,25 +740,6 @@ 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); @@ -1042,7 +1028,7 @@ if (initial === true) { showSearchInput = this.showSearchInput = data.results.length >= this.opts.minimumResultsForSearch; - this.search.parent()[showSearchInput ? "removeClass" : "addClass"]("select2-hide-search"); + this.container.find(".select2-search")[showSearchInput ? "removeClass" : "addClass"]("select2-search-hidden"); //add "select2-with-searchbox" to the container if search box is shown this.container[showSearchInput ? "addClass" : "removeClass"]("select2-with-searchbox"); From 5e18e71cb49c034e62c71764e5c7ad1ab5dd3c83 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Thu, 7 Jun 2012 23:47:02 -0700 Subject: [PATCH 3/7] possible fix for issue #77 better blur support for touch devices like ipad --- select2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/select2.js b/select2.js index 25ec123c..dbe29e20 100755 --- a/select2.js +++ b/select2.js @@ -317,7 +317,7 @@ * blurs any Select2 container that has focus when an element outside them was clicked or received focus */ $(document).ready(function () { - $(document).delegate("*", "mousedown focusin", function (e) { + $(document).delegate("*", "mousedown focusin touchstart", function (e) { var target = $(e.target).closest("div.select2-container").get(0); $(document).find("div.select2-container-active").each(function () { if (this !== target) $(this).data("select2").blur(); From 3ba3e5771573c5f6e6fc827882f46145d3939d71 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Thu, 7 Jun 2012 23:56:51 -0700 Subject: [PATCH 4/7] issue #77, blur on touchend - seems more native --- select2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/select2.js b/select2.js index dbe29e20..e2a8db5c 100755 --- a/select2.js +++ b/select2.js @@ -317,7 +317,7 @@ * blurs any Select2 container that has focus when an element outside them was clicked or received focus */ $(document).ready(function () { - $(document).delegate("*", "mousedown focusin touchstart", function (e) { + $(document).delegate("*", "mousedown focusin touchend", function (e) { var target = $(e.target).closest("div.select2-container").get(0); $(document).find("div.select2-container-active").each(function () { if (this !== target) $(this).data("select2").blur(); From 588d9a5ce98264370819f15ca17289451294e1f8 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Fri, 8 Jun 2012 14:32:17 -0700 Subject: [PATCH 5/7] force a min height on multi containers, closes #96 --- select2.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/select2.css b/select2.css index e9bdce7a..244dc03e 100755 --- a/select2.css +++ b/select2.css @@ -328,6 +328,10 @@ disabled look for already selected choices in the results dropdown margin-top:0; } +.select2-container-multi .select2-choices { + min-height: 26px; +} + .select2-container-multi.select2-container-active .select2-choices { -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); From cb2e131c502e76de79ee866ec8410372c20aa333 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Fri, 8 Jun 2012 18:18:40 -0700 Subject: [PATCH 6/7] adding browser compatibility. issue #79 --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 24a9dec4..d1cda052 100755 --- a/README.md +++ b/README.md @@ -19,6 +19,14 @@ result set allowing for the 'infinite scrolling' of results. * Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging. +Browser Compatibility +-------------------- +* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37) +* Chrome 8+ +* Firefox 3.5+ +* Safari 3+ +* Opera 10.6+ + Bug tracker ----------- From 94ffecb824cccab6b8df93d6ac5212e50817d6a6 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Fri, 8 Jun 2012 18:23:12 -0700 Subject: [PATCH 7/7] readme tweak --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d1cda052..3b61cad5 100755 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ tagging. Browser Compatibility -------------------- -* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37) +* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37)) * Chrome 8+ * Firefox 3.5+ * Safari 3+