Автозаполнение jQuery с несколькими переносами строк - PullRequest
0 голосов
/ 04 июля 2018

Я использую автозаполнение 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>

Из-за разрыва строки в тексте я получаю «Uncaught SyntaxError: Неверный или неожиданный токен» в этой строке. Я попытался использовать jQuery.data с тем же результатом.

Как я могу исправить эту ошибку, не избавляясь от всех разрывов строк?

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Для разрыва строки необходимо добавить \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>
0 голосов
/ 04 июля 2018

Вы можете взглянуть на эту скрипку . Если вы замените разрывы строк на '\ n', это сработает.

Вам необходимо избежать разрыва строки в данных перед формированием объекта Javascript (equipment) из данных.

...