RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

highlighting and keyboard navigation improvements to result list that has optgroups

Browse Source
This commit is contained in:
Igor Vaynberg 2012-06-29 20:15:45 -07:00
parent adc15e3682
commit 95a144d85e
2 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
select2.css
View File

@ -467,6 +467,8 @@ disabled look for already selected choices in the results dropdown
}
/* end multiselect */
.select2-match { text-decoration: underline; }
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
.select2-result-unselectable .select2-match { text-decoration: none; }
.select2-offscreen { position: absolute; left: -1000px; }

42
select2.js
View File

@ -480,7 +480,7 @@
search.bind("blur", function () { search.removeClass("select2-focused");});
this.dropdown.delegate(resultsSelector, "click", this.bind(function (e) {
if ($(e.target).closest(".select2-result:not(.select2-disabled)").length > 0) {
if ($(e.target).closest(".select2-result-selectable:not(.select2-disabled)").length > 0) {
this.highlightUnderEvent(e);
this.selectHighlighted(e);
} else {
@ -551,16 +551,15 @@
compound=("children" in result) && result.children.length > 0;
markup.push("<li class='select2-result-depth-" + depth);
if (!selectable) { markup.push(" select2-result-unselectable"); } else { markup.push(" select2-result");}
markup.push(" select2-result");
markup.push(selectable ? " select2-result-selectable" : " select2-result-unselectable");
if (compound) { markup.push(" select2-result-with-children"); }
markup.push("'");
if (selectable) {
uid=nextUid();
markup.push(" id='select2-result-"+uid+"'");
uidToData[uid]=result;
}
markup.push("><div class='select2-result-label'>");
formatted=opts.formatResult(result, query, markup);
@ -781,7 +780,17 @@
if (index < 0) return;
children = results.find(".select2-result");
if (index == 0) {
// if the first element is highlighted scroll all the way to the top,
// that way any unselectable headers above it will also be scrolled
// into view
results.scrollTop(0);
return;
}
children = results.find(".select2-result-selectable");
child = $(children[index]);
@ -809,12 +818,12 @@
// abstract
moveHighlight: function (delta) {
var choices = this.results.find(".select2-result"),
var choices = this.results.find(".select2-result-selectable"),
index = this.highlight();
while (index > -1 && index < choices.length) {
index += delta;
if (!$(choices[index]).hasClass("select2-disabled")) {
if ($(choices[index]).hasClass("select2-result-selectable")) {
this.highlight(index);
break;
}
@ -823,7 +832,7 @@
// abstract
highlight: function (index) {
var choices = this.results.find(".select2-result .select2-result-label");
var choices = this.results.find(".select2-result-selectable");
if (arguments.length === 0) {
return indexOf(choices.filter(".select2-highlighted")[0], choices.get());
@ -832,10 +841,6 @@
if (index >= choices.length) index = choices.length - 1;
if (index < 0) index = 0;
if ($(choices[index]).parent().is('.select2-result-unselectable')) {
return;
}
choices.removeClass("select2-highlighted");
$(choices[index]).addClass("select2-highlighted");
@ -846,10 +851,13 @@
// abstract
highlightUnderEvent: function (event) {
var el = $(event.target).closest(".select2-result");
var el = $(event.target).closest(".select2-result-selectable");
if (el.length > 0 && !el.is(".select2-highlighted")) {
var choices = this.results.find('.select2-result');
var choices = this.results.find('.select2-result-selectable');
this.highlight(choices.index(el));
} else if (el.length == 0) {
// if we are over an unselectable item remove al highlights
this.results.find(".select2-highlighted").removeClass("select2-highlighted");
}
},
@ -987,7 +995,7 @@
// abstract
selectHighlighted: function () {
var data = this.results.find(".select2-highlighted").not(".select2-disabled").closest('.select2-result').not('.select2-result-unselectable').data("select2-data");
var data = this.results.find(".select2-highlighted").not(".select2-disabled").closest('.select2-result-selectable').data("select2-data");
if (data) {
this.onSelect(data);
}
@ -1240,7 +1248,7 @@
// find the selected element in the result list
this.results.find(".select2-result").each2(function (i, elm) {
this.results.find(".select2-result-selectable").each2(function (i, elm) {
if (equal(self.id(elm.data("select2-data")), self.opts.element.val())) {
selected = i;
return false;
@ -1666,7 +1674,7 @@
// multi
postprocessResults: function () {
var val = this.getVal(),
choices = this.results.find(".select2-result"),
choices = this.results.find(".select2-result-selectable"),
self = this;
choices.each2(function (i, choice) {