How to maintain text formatting in datalist values

43 Views Asked by At

So I need the text format to have spaces down, the values copied and pasted from Excel and the users of the website I'm creating need the format of the copied text to remain the same. Example:


Work

  • First job
  • Second Job

Work until it's finished


I took the contents of the datalist from the database and the following is the coding

 var dataambilpekerjaan = <?= json_encode($ambilpekerjaan) ?>;
    var htmlambilpekerjaan = "";

    $(document).ready(function() {
        htmlambilpekerjaan = "<option value=''> -- Pilih -- </option>";
        $.each(dataambilpekerjaan, function(key, value) {
            // htmlambilpekerjaan += `<option value="${value.Pekerjaan}">${value.Pekerjaan}</option>`;
            htmlambilpekerjaan += `<option value="${value.Pekerjaan}"></option>`;
        });

        console.log('Hasil Pekerjaan :', htmlambilpekerjaan);
        // console.log('datanya :', htmlgmgt);
    });

and the following is the input display coding with the data list

<input type="text" list="PekerjaanList-" id="Pekerjaan-` + count + `" class="form-control" style="font-size:12px;text-align:center;width:220px;white-space: pre-line;" placeholder="Ketik/Pilih"><datalist style="white-space: pre-line;" id="PekerjaanList-">${htmlambilpekerjaan}</datalist>

then I tried to make the appearance match the previous copy paste format by placing the textarea as the recipient of choice in the datalist

<textarea style="100%;margin: auto;white-space: pre-line;font-size:12px" class="form-control" id="PekerjaanAmbil-` + count + `" name="Pekerjaan[]" cols="5" rows="2" required></textarea>

and the following is the coding to drag the selection from the datalist to the text area

$('#Pekerjaan-' + count).change(function() {
  var ambilpekerjaan = $('#Pekerjaan-' + count).val();
  console.log('ambil :', ambilpekerjaan);
  $('#PekerjaanAmbil-' + count).val(ambilpekerjaan);
})

The option value in the view gets a value with the appropriate writing format

option value in the console log gets a value with the appropriate writing format

Below I see the results of the withdrawal for the datalist option. It can be seen from the console that when the data is given to the option value, the writing format is still appropriate

The writing format is not appropriate when the datalist is displayed

However, when selected in the datalist, the data does not have a writing format

results when selected and enters the textarea without writing format

When I select the option, the results obtained for the console and textarea writing formats do not match

0

There are 0 best solutions below