2

背景

我为 HTML元素开发了一个基于 jQuery 的穿梭小部件select，因为我找不到一个经过最少编码并提供了一个正则表达式过滤器来补偿变音符号的小部件。

问题

当向 中添加几千个条目时select，正则表达式过滤器会变慢。你可以看到如下问题：

  1. 浏览到：http: //jsfiddle.net/U8Xre/2/
  2. 单击结果面板中的输入字段。
  3. 键入任何正则表达式（例如，^a.*ai）。

代码

我相信罪魁祸首潜伏在这里：

var options = $src.empty().scrollTop( 0 ).data( "options" );
var search = $.trim( $input.val() );
var regex = new RegExp( search, 'gi' );
var len = options.length;
var $html = $(document.createElement( 'option' ));
for( var i = 0; i < len; i++ ) {
  var o = options[ i ];
  if( o.text.dediacritics().match( regex ) !== null ) {
    $src.append( $html.clone().text( o.text ).val( o.value ) );
  }
}
$src.css( 'width', $input.width() + 4 );

$src来源在哪里，$('#select')并String.prototype.dediacritics在小提琴中定义。上面的代码针对每个按键运行。还有一个相关的片段：

// Create a copy of the source options to use when matching the regex.
var $options = [];
$src.find( "option" ).each( function() {
  $options.push( { value: $(this).val(), text: $(this).text() } );
});
$src.data( "options", $options );

这会复制源列表中的选项，但只运行一次。（这会导致在穿梭选项时出现重复错误，但是将上述代码添加到input事件处理程序中会更加减慢过滤器。）

问题

如何使代码几乎实时地对多达 5,000 个单词的列表执行正则表达式过滤？

谢谢！

4

3 回答 3

1

一个小评论，如果您没有使用正则表达式匹配的结果，那么您应该使用正则表达式测试：

  if( o.text.dediacritics().match( regex ) !== null ) {

使用测试：

  if( regex.test(o.text.dediacritics()) ) {
于 2012-11-26T04:51:19.540 回答
1

我建议你

  • 创建一个包含所有选项名称列表的多行字符串，每个选项名称位于单独的行中
  • 将正则表达式应用于此多行字符串以通过删除不匹配的行来过滤其内容
  • 使用匹配行更新 html 作为选择元素的选项
于 2012-11-26T01:03:36.187 回答
1

我猜想更难的工作是重复调用dediacritics()（带有许多正则表达式替换）而不是进行搜索（尽管我没有进行任何分析）。因此，您应该缓存这些去变音符号的字符串并仅通过它们进行搜索。顺便说一句，test通常比match.

此外，您应该尽可能避免 DOM 操作 - 在清空和重新附加整个选项列表 onkeypress 时，您有很多操作。

// once:
var options = [],
    src = $src[0]; // or whatever to get the DOM element
$.each( src.options, function() {
    options.push( { el: this, text: $(this).text().dediacritics(), hidden:false } );
});
// you might put it on the element via .data(), but need not

// onkeypress:
var regex = new RegExp( $.trim($input.val()), 'i' );
var curEl = src.firstChild;
for (var i=0; i<options.length; i++) {
    var option = options[i];
    if (regex.test( option.text )) {
        if (option.hidden)
            src.insertBefore(option.el, curEl);
        curEl = option.el.nextSibling;
        option.hidden = false;
    } else {
        if (!option.hidden) {
            curEl = option.el.nextSibling;
            src.removeChild(option.el);
        }
        option.hidden = true;
    }
}

Demo：这是非常快的（“实时”），但是当调用5000 次时，您可以感受到构造options数组所需的时间。dediacritics()

于 2012-11-26T01:34:06.797 回答