Skip to content

Commit

Permalink
When not showing search box, up/down arrows and searching still work.
Browse files Browse the repository at this point in the history
- 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 <igor.vaynberg@gmail.com>
  • Loading branch information
asolove authored and ivaynberg committed Jun 8, 2012
1 parent 4ba25b8 commit ec759ac
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 2 deletions.
6 changes: 6 additions & 0 deletions select2.css
Expand Up @@ -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));
Expand Down
23 changes: 21 additions & 2 deletions select2.js
Expand Up @@ -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);
Expand Down Expand Up @@ -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");
Expand Down

0 comments on commit ec759ac

Please sign in to comment.