Попытка извлечь и заменить последнее значение (символ или слово) в поле ввода путем сопоставления или сравнения его с другим значением

Question

Я пытаюсь выяснить, как можно извлечь последнее значение (слово или символ) в поле ввода, сохранить его в переменной, а затем заменить последнее значение из набора значений, если оно имеет точное или частичное совпадение.

Элементы внутри bindname-block состоят из значений.Например, я набираю текст:

Веб-разработка anna

Веб-разработка an

Последнее значение annaили an следует заменить в поле ввода после того, как я щелкнул набор значений, соответствующий или частично совпадающий, равный @annaenriquez, или любые значения, имеющие следующий текст anna или an, поэтомув основном вы не ограничены только одним выбором

Приведенный ниже код находится в стадии разработки, которую я пытался решить.

    $('#raintool-app').on('click', '.-bindname-inactive', function() {
    
        let name = $(this).text();
        $('.task-label input').select().val(function(i, value) { 
            return value + " " + name;
        });
        $(this).toggleClass('-bindname-inactive -bindname-active');

    });

    $('#raintool-app').on('change', '.select-block', function() {
        // var value = $(this).val();
        let name = $(this).val();
        $('.task-label input').select().val(function(i, value) { 
            return value + " " + name;
        });

        // console.log(value);
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="#raintool-app">


<div class="task-label">
    <input type="text" />
</div>

<ul class="bindname-block">
                <li data-name="annaenriquez" class="bindname-pill -name-annaenriquez -bindname-active -display-name">@annaenriquez</li>
            
                <li data-name="conchui" class="bindname-pill -bindname-inactive -name-conchui">@conchui</li>
            
                <li data-name="donelleagudo" class="bindname-pill -bindname-inactive -name-donelleagudo -display-name">@donelleagudo</li>
            
                <li data-name="dwezilmanuel" class="bindname-pill -bindname-inactive -name-dwezilmanuel -display-name">@dwezilmanuel</li>
            
                <li data-name="ellaborlongan" class="bindname-pill -bindname-inactive -name-ellaborlongan -display-name">@ellaborlongan</li>
            
                <li data-name="gabmamites" class="bindname-pill -bindname-inactive -name-gabmamites -display-name">@gabmamites</li>
            
                <li data-name="janelleyu" class="bindname-pill -bindname-inactive -name-janelleyu -display-name">@janelleyu</li>
            
                <li data-name="jasanmiguel" class="bindname-pill -bindname-inactive -name-jasanmiguel -display-name">@jasanmiguel</li>
            
                <li data-name="jpdguzman" class="bindname-pill -bindname-inactive -name-jpdguzman -display-name">@jpdguzman</li>
            
                <li data-name="juliusmiguel" class="bindname-pill -bindname-inactive -name-juliusmiguel">@juliusmiguel</li>
            
                <li data-name="kimtan" class="bindname-pill -bindname-inactive -name-kimtan -display-name">@kimtan</li>
            
                <li data-name="lorenzcapellan" class="bindname-pill -bindname-inactive -name-lorenzcapellan -display-name">@lorenzcapellan</li>
            
                <li data-name="migobundoc" class="bindname-pill -bindname-inactive -name-migobundoc">@migobundoc</li>
            
                <li data-name="noeldelacruz" class="bindname-pill -bindname-inactive -name-noeldelacruz -display-name">@noeldelacruz</li>
            
                <li data-name="rozhelturgo" class="bindname-pill -bindname-inactive -name-rozhelturgo">@rozhelturgo</li>
            </ul>
</div>

Answer 1

Если вы пытаетесь реализовать упоминание имени, это потребует более сложной логики.Но для этого случая использования я высовываю последнее слово и заменяю на нажатый элемент

$('#raintool-app').on('click', '.-bindname-inactive', function() {

  let name = $(this).text();
  $('.task-label input').select().val(function(i, value) {
    var keywords = value.split(' ');
    
    var mention = keywords.pop();
    
    return  mention.startsWith('@') ? keywords.join(' ') + " " + name : value;
  });
  $(this).toggleClass('-bindname-inactive -bindname-active');

});

$('#raintool-app').on('change', '.select-block', function() {
  // var value = $(this).val();
  let name = $(this).val();
  $('.task-label input').select().val(function(i, value) {
    return value + " " + name;
  });

  // console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="raintool-app">


  <div class="task-label">
    <input type="text" />
  </div>

  <ul class="bindname-block">
    <li data-name="annaenriquez" class="bindname-pill -name-annaenriquez -bindname-active -display-name">@annaenriquez</li>

    <li data-name="conchui" class="bindname-pill -bindname-inactive -name-conchui">@conchui</li>

    <li data-name="donelleagudo" class="bindname-pill -bindname-inactive -name-donelleagudo -display-name">@donelleagudo</li>

    <li data-name="dwezilmanuel" class="bindname-pill -bindname-inactive -name-dwezilmanuel -display-name">@dwezilmanuel</li>

    <li data-name="ellaborlongan" class="bindname-pill -bindname-inactive -name-ellaborlongan -display-name">@ellaborlongan</li>

    <li data-name="gabmamites" class="bindname-pill -bindname-inactive -name-gabmamites -display-name">@gabmamites</li>

    <li data-name="janelleyu" class="bindname-pill -bindname-inactive -name-janelleyu -display-name">@janelleyu</li>

    <li data-name="jasanmiguel" class="bindname-pill -bindname-inactive -name-jasanmiguel -display-name">@jasanmiguel</li>

    <li data-name="jpdguzman" class="bindname-pill -bindname-inactive -name-jpdguzman -display-name">@jpdguzman</li>

    <li data-name="juliusmiguel" class="bindname-pill -bindname-inactive -name-juliusmiguel">@juliusmiguel</li>

    <li data-name="kimtan" class="bindname-pill -bindname-inactive -name-kimtan -display-name">@kimtan</li>

    <li data-name="lorenzcapellan" class="bindname-pill -bindname-inactive -name-lorenzcapellan -display-name">@lorenzcapellan</li>

    <li data-name="migobundoc" class="bindname-pill -bindname-inactive -name-migobundoc">@migobundoc</li>

    <li data-name="noeldelacruz" class="bindname-pill -bindname-inactive -name-noeldelacruz -display-name">@noeldelacruz</li>

    <li data-name="rozhelturgo" class="bindname-pill -bindname-inactive -name-rozhelturgo">@rozhelturgo</li>
  </ul>
</div>