Question

当选择一个项目时，我正在使用jQuery自动完成功能来填写多个字段。除非任何数据中都有分页符，否则一切都会正常进行。因此，这是jquery示例代码：

var equipment = [
{ id: "3",
  label: "Custom Name 3",
  text: "Some text without line break"
},
{ id: "4",
  label: "Custom 4",
  text: "Some text WITH
line break"
}
];

$( "#equipment" ).autocomplete({
      minLength: 0,
      source: equipment,
      focus: function( event, ui ) {
        $( "#equipment" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#equipment" ).val( ui.item.label );
        $( "#id" ).val( ui.item.id );
        $( "#text" ).html( ui.item.text ).text();
        return false;
      }
})

还有html：

<input id="equipment" name="name">
<textarea id="text" name="text" cols="45" rows="5"></textarea>

由于“文本”中的换行符，我在该行中收到“未捕获的SyntaxError：无效或意外的令牌”。我尝试使用jQuery.data获得相同的结果。

如何在不消除所有换行符的情况下解决此错误？

Answer 1

您可以查看此fiddle。如果将换行符替换为'\ n'，则可以使用。

在从数据中形成Javascript对象（equipment）之前，需要避免数据中的换行符。

Answer 2

要换行，您需要在文本中添加\n

text: "Some text without\nline break"

代替

text: "Some text without line break"

尝试一下：|

var equipment = [
{ id: "3",
  label: "Custom Name 3",
  text: "Some text without\nline break"
},
{ id: "4",
  label: "Custom 4",
  text: "Some text WITH\nline break"
}
];

$( "#equipment" ).autocomplete({
  minLength: 0,
  source: equipment,
  focus: function(event, ui) {
    $( "#equipment" ).val( ui.item.label );
    return false;
  },
  select: function(event, ui) {
    $("#equipment").val( ui.item.label );
    $("#id").val( ui.item.id );
    $("#text").html( ui.item.text ).text();
    return false;
  }
})

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="equipment" name="name">
<textarea id="text" name="text" cols="45" rows="5"></textarea>

带有多个换行符的jQuery自动完成

2 个答案: