select2 AJAX控件干扰选项卡排序

Question

我在asp.net的dropdownlist上使用select2。代码如下：

<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />
var v = /* get the select control */
v.select2(); 

问题是，一旦调用select2()函数，制表符排序就会停止工作。因此，当按下下拉列表选项卡键时，焦点不会移动到具有下一个最高选项卡索引的控件，而是看似随机地移动到其他控件。

注释调用函数的行可以解决这个问题，但我需要过滤。我已经尝试了这里讨论的一些其他过滤技术，但它们太复杂了。Select2非常简单和有用，因为您所要做的就是包含JS和CSS文件并调用函数。

如何解决此订购问题？或者，有没有其他像select2这样易于使用的过滤选项对我有帮助？

Answer 1

经过几个小时的努力，我已经解决了这个问题。事实证明，select2 AJAX控件确实会破坏选项卡的顺序，如果选项卡一聚焦就被按下，也就是说，当没有键入任何内容时。但是，如果键入了一些文本，它不会破坏选项卡的排序。

select2的自动生成HTML的内部结构如下：

<div class="select2-container">
  <a class="select2-choice">
    <span</span>
    <abbr class="select2-search-choice-close" />
    <div> <b></b> </div>
  </a>
  <div class="select2-drop select2-offscreen">
    <div class="select2-search">
      <input class="select2-input select2-focused" tabIndex=<somevalue> />
    </div>
    <ul class="select2-results></ul>
  </div>
</div>

如果在HTML选择控件中键入了一些文本，则选项卡顺序工作正常，如果没有键入任何文本，则会破坏选项卡顺序。我在firebug中使用了document.activeElement来找到这两种情况下的集中控制。在没有文本的情况下，锚点元素具有焦点，而在键入文本的情况中，HTML输入元素具有焦点。

如上所示，虽然select2.js正确地设置了HTML输入元素的tabIndex属性，但它没有设置锚点元素的tabIndex属性。

解决方案

只需在select2.js:中进一步指定的位置添加以下行

this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));

在以下位置添加行：

this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);
this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);
this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");

和之前：

search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;
// initialize the container
this.initContainer();
this.initContainerWidth();
installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered",  this.bind(this.highlightUnderEvent));
installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));

所以它变成了：

this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");
this.container.find("a.select2-choice").attr("tabIndex",   this.opts.element.attr("tabIndex")); /* atif */
search.attr("tabIndex", this.opts.element.attr("tabIndex"));
this.resultsPage = 0;
this.context = null;

在select2.js中进行此更改。显然，您需要使用完整的js版本，而不是min版本。

你所要做的就是添加一行，如上所述。如果操作正确，这将成为VS2008中的第504行。