CODEWITHSUNDEEP
javascriptreactjs
Adrian
Adrian

Reputation: 713

Select a word from multiple options within text input

I have a text template like this:

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

I need a text input where the user will be able to edit the text but instead of {sea|city} or any other similar pattern there should be a dropdown to pick one of available options, also the user should be able to delete the dropdown by pressing backspace when editing text

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

I tried to split the text so that I have a dropdown where it is needed and multiple text inputs for the text, 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 like it is one whole input not multiple separated inputs.

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

Upvotes: 0

Views: 186

Answers (2)

Adrian
Adrian

Reputation: 713

I ended up using contenteditable=true flag for container div, it allows typing and removing inside content. Also for the dropdowns which are more complex - divs with multiple layers of children inside I had to use contenteditable=false to allow removing the entire div at once after pressing backspace. For example:

<div contenteditable=true>
Some text <div contenteditable=false>complex dropdown</div> more text.
</div>

Upvotes: 0

Mara Black
Mara Black

Reputation: 1751

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>

Upvotes: 1

Related Questions