RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 06:46:04 +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 */ /* 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; } .select2-offscreen { position: absolute; left: -1000px; }

44
select2.js
View File

@ -480,7 +480,7 @@
search.bind("blur", function () { search.removeClass("select2-focused");}); search.bind("blur", function () { search.removeClass("select2-focused");});
this.dropdown.delegate(resultsSelector, "click", this.bind(function (e) { 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.highlightUnderEvent(e);
this.selectHighlighted(e); this.selectHighlighted(e);
} else { } else {
@ -550,17 +550,16 @@
selectable=id(result) !== undefined; selectable=id(result) !== undefined;
compound=("children" in result) && result.children.length > 0; compound=("children" in result) && result.children.length > 0;
markup.push("<li class='select2-result-depth-"+depth); 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"); } if (compound) { markup.push(" select2-result-with-children"); }
markup.push("'"); markup.push("'");
if (selectable) {
uid=nextUid(); uid=nextUid();
markup.push(" id='select2-result-"+uid+"'"); markup.push(" id='select2-result-"+uid+"'");
uidToData[uid]=result; uidToData[uid]=result;
}
markup.push("><div class='select2-result-label'>"); markup.push("><div class='select2-result-label'>");
formatted=opts.formatResult(result, query, markup); formatted=opts.formatResult(result, query, markup);
@ -781,7 +780,17 @@
if (index < 0) return; 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]); child = $(children[index]);
@ -809,12 +818,12 @@
// abstract // abstract
moveHighlight: function (delta) { moveHighlight: function (delta) {
var choices = this.results.find(".select2-result"), var choices = this.results.find(".select2-result-selectable"),
index = this.highlight(); index = this.highlight();
while (index > -1 && index < choices.length) { while (index > -1 && index < choices.length) {
index += delta; index += delta;
if (!$(choices[index]).hasClass("select2-disabled")) { if ($(choices[index]).hasClass("select2-result-selectable")) {
this.highlight(index); this.highlight(index);
break; break;
} }
@ -823,7 +832,7 @@
// abstract // abstract
highlight: function (index) { 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) { if (arguments.length === 0) {
return indexOf(choices.filter(".select2-highlighted")[0], choices.get()); return indexOf(choices.filter(".select2-highlighted")[0], choices.get());
@ -832,10 +841,6 @@
if (index >= choices.length) index = choices.length - 1; if (index >= choices.length) index = choices.length - 1;
if (index < 0) index = 0; if (index < 0) index = 0;
if ($(choices[index]).parent().is('.select2-result-unselectable')) {
return;
}
choices.removeClass("select2-highlighted"); choices.removeClass("select2-highlighted");
$(choices[index]).addClass("select2-highlighted"); $(choices[index]).addClass("select2-highlighted");
@ -846,10 +851,13 @@
// abstract // abstract
highlightUnderEvent: function (event) { 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")) { 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)); 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 // abstract
selectHighlighted: function () { 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) { if (data) {
this.onSelect(data); this.onSelect(data);
} }
@ -1240,7 +1248,7 @@
// find the selected element in the result list // 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())) { if (equal(self.id(elm.data("select2-data")), self.opts.element.val())) {
selected = i; selected = i;
return false; return false;
@ -1666,7 +1674,7 @@
// multi // multi
postprocessResults: function () { postprocessResults: function () {
var val = this.getVal(), var val = this.getVal(),
choices = this.results.find(".select2-result"), choices = this.results.find(".select2-result-selectable"),
self = this; self = this;
choices.each2(function (i, choice) { choices.each2(function (i, choice) {