Question

我的jQuery UI Autocomplete突然停止工作。显然我的桌子尺寸太大了，因为当我将可用记录限制在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>

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

Answer 1

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

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

IIRC，ruby中字符串的最大长度为65535个字符，所以假设名称的平均长度约为30个字符，2040是它可以达到的限制。

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

在完全2041条记录之后，jQuery UI Autocomplete停止工作

1 个答案: