select2 AJAX 控件扰乱了选项卡排序

Posted 2023-05-07

【中文标题】select2 AJAX 控件扰乱了选项卡排序

【英文标题】：select2 AJAX control disturbs tab ordering

【发布时间】：2012-07-31 05:22:14

【问题描述】：

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

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

如何解决这个排序问题？或者，是否有另一个像 select2 一样易于使用的过滤选项可以帮助我？

【参考方案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 属性，但没有设置锚元素。

解决方案

只需在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 行。