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()函数，选项卡排序就会停止工作。因此，当按下下拉列表选项卡键时，焦点不会移动到具有下一个最高tabindex的控件，而是看似随机移动到其他控件。

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

如何解决此订购问题？或者，是否有另一个过滤选项与select2一样易于使用，可以帮助我？

Answer 1

经过几个小时的奋斗，我解决了这个问题。事实证明，如果选项卡一旦获得焦点就被按下，即当没有输入任何内容时，select2 AJAX控件会破坏Tab键顺序。但是，如果键入了某些文本，它不会破坏制表符顺序。

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选择控件中键入了某些文本，则Tab键排序正常，如果未键入文本，则Tab键顺序将被销毁。我在firebug中使用document.activeElement来找到两种情况下的集中控制。在没有文本的情况下，锚元素具有焦点，并且在键入文本的情况下，HTML输入元素具有焦点。

如上所示，虽然select2.js正确设置了HTML输入元素的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版本，而不是最小版本。

您需要做的就是添加一行，如上所述。如果正确完成，这将成为VS2008中＃504行。

select2 AJAX控件干扰选项卡排序

1 个答案:

解决方案