jQuery UI 正好在 2041 条记录后自动完成停止工作

Question

我的 jQuery UI 自动完成功能突然停止工作。显然我的 table 大小太大了，因为当我将可用记录限制为 2040 或任何低于该值的数字时，它工作得很好，但中断然后我将其限制为 2041 或任何高于该值的数字。

这是无法运行的完整代码：

  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
      var availableTags = [
        <%= raw(Page.pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")) %>
      ];
      function split( val ) {
        return val.split( /,\s*/ );
      }
      function extractLast( term ) {
        return split( term ).pop();
      }

      $( "#pages" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
          if ( event.keyCode === $.ui.keyCode.TAB &&
              $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
          }
        })
        .autocomplete({
          minLength: 0,
          source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
              availableTags, extractLast( request.term ) ) );
          },
          focus: function() {
            // prevent value inserted on focus
            return false;
          },
          select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
          }
        });
    });
    </script>
  </head>

  <div class="ui-widget">
    <textarea id="pages" name="pages" size="50"></textarea>
  </div><br>

下面是一个有效的代码示例：

  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
      var availableTags = [
        <%= raw(Page.limit(2040).pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")) %>
      ];
      function split( val ) {
        return val.split( /,\s*/ );
      }
      function extractLast( term ) {
        return split( term ).pop();
      }

      $( "#pages" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
          if ( event.keyCode === $.ui.keyCode.TAB &&
              $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
          }
        })
        .autocomplete({
          minLength: 0,
          source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
              availableTags, extractLast( request.term ) ) );
          },
          focus: function() {
            // prevent value inserted on focus
            return false;
          },
          select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
          }
        });
    });
    </script>
  </head>

  <div class="ui-widget">
    <textarea id="pages" name="pages" size="50"></textarea>
  </div><br>

为什么 table 大小很重要？我能以某种方式更改限制吗？

Answer 1

IMO，这里的限制不是来自 jquery，而是来自你插入的字符串：

Page.limit(2040).pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")

IIRC，ruby中一个字符串的最大长度是65535个字符，假设name的平均长度是30个字符左右，2040是它可以达到的极限。

解决方案：您可以尝试循环并插入每个名称，看看它是否有效。

jQuery UI 正好在 2041 条记录后自动完成停止工作

jQuery UI Autocomplete stops working after exactly 2041 records

javascript

jquery

jquery-ui

autocomplete

jquery-autocomplete