Select a word from multiple options within text input

userxHf9 0
Viewed 36

I have a text template like this:

I live in the middle of the {sea|city}, and I am {happy|sad}.

I need to have a text input where user will be able to edit this text but instead of {sea|city} or any other similar pattern there should be a select input with dropdown where user should be able to pick between available options or remove the select input at all.

But in case the user decides to delete the select input, the token {sea|city} should be removed from the original text as well so I can save it on backend.

I tried to split the text so that I have a select option where it is needed and multiple text inputs between them, but this makes the text hard to edit because the user has to jump from one input to another, I need to make the user feel lake it is one whole input not multiple separated inputs.

Are there any approaches or libraries that I ca use for that ?

reactjs javascript
1 Answers

Maybe create a custom dropdown with a close button somewhere to make all the text cursive..

and getText function is ugly, I know.. :( but atm i don't have any idea how to make it better (if you delete one dropdown the other one will not have the close button because it's based on class, but since you can create a separate component, this will work..)

// this could be done way more nicer but i don't know how..
function getText(selected) {

  let text = $('#place').text();

  // first dropdown
  if (selected === 'sea' || selected === 'city') {
    text += ' ' + selected + $('#feeling').text() + ' ' + $('#feeling-select').find(":selected").text();
    // second dropdown
  } else if (selected === 'happy' || selected === 'sad') {
    text += ' ' + $('#place-select').find(":selected").text() + $('#feeling').text() + ' ' + selected
  } else {
    // removed dropdown
    text += $('#place-select').find(":selected").text() + $('#feeling').text() + $('#feeling-select').find(":selected").text();
  }

  console.log(text)

}

$('.delete-option').click(function() {
  $('.delete-option').remove()
  $('#place-select').remove()
  getText(null)
});



$("select.option").change(function(event) {
  const selected = $(this).children("option:selected").text();
  getText(selected);
});
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

#place-select,
#feeling-select {
  border: none;
  color: orange;
}

.delete-option {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <label for="place" id="place">I live in the middle of the</label>
  <select name="place" id="place-select" class="option">
    <option value="sea">sea</option>
    <option value="city">city</option>
  </select>
  <!-- use icon and place at top -->
  <span class="delete-option"> x </span>

  <label for="feeling" id="feeling"> and I am </label>
  <select name="feeling" id="feeling-select" class="option">
    <option value="happy">happy</option>
    <option value="sad">sad</option>
  </select>
  <!-- use icon and place at top -->
  <span class="delete-option"> x </span>
</div>

Mara Black0
Related