时间戳

首页 > 解决方案 > 带有多个换行符的 jQuery 自动完成

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

问题描述

I am using jQuery autocomplete to fill out multiple fields when an item is selected. 除非任何数据中存在分页符，否则一切正常。所以，这里是 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>

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

如何在不删除所有换行符的情况下修复此错误？

标签： jqueryjquery-ui-autocomplete

解决方案

对于换行符，您需要添加\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>

推荐阅读