Zmiana string na wartość wybraną z listy

Question

Chciałbym zrobić interaktywny input, który po wprowadzeniu @ + litera pokaże listę obecnych osób, a po kliknięciu uzupełni input o daną wartość patrz zdj. poniżej .

Z samym pokazaniem osób nie mam problemu. Do tego wykorzystuję wyrażenie regularne 'RegEx', a samą listę osób pobieram z tablicy. 

Problem pojawia się przy wyborze danej osoby z listy. Gdy uruchamiam funkcję poprzez kliknięcie to raz, że funkcja zaczyna działanie dopiero po dwukrotnym jej wymuszeniu, a dwa to zamiana czy też uzupełnienie brakującej nazwy po kliknięciu w daną osobę.

// co do tego kodu nie jestem pewien czy on działa zgodnie z konspektem 
$(document).on("click", ".find_user div", ()=>{
    let c = $(".find_user div");
    for(let i = 0; i< c.length; i++){
        $(".find_user div#found-"+(i+1)).click(()=>{
            //hide 
            $("#chat_text").val($("#chat_text").val() + $(".find_user div#found-"+(i+1)).text())
        })
    }
})

Uzupełniając: Gdy mam wpisane w input @gre to w sytuacji kiedy kliknę w greg z listy nie wiem zbytnio jak zamienić dane słowo w inpucie o pełną nazwę. 

Trzy: To sytuacja kiedy mam @gre w środku lub na końcu zdania. Gdyby było inaczej to w dużym skrócie zrobiłbym coś w stylu poniższego kodu: 

$("#text").val($("#text").val() + "@" + selected_from_list)

RegEx code: 

var patients = [
    "Greg",
    "Grey",
    "Anna"
];
        function xa(input){
            var re = new RegExp(input+'.+$', 'i');
            let patient = patients.filter(function(e, i, a){
                return e.search(re) != -1;
            });
    
            return patient;
        }

Pytanie dodatkowe: Na wyżej opublikowanym screenshot'cie jest zwyczajny input [text]. W przyszłości chcę wykorzystać contenteditable div, ale nie mogę znaleźć rozwiązania, aby wyłączyć rozciąganie go po naduszeniu przycisku ENTER. Jeśli ktoś ma wiedzę jak zrobić aby div zachowywał się jak zwyczajny input to byłbym wdzięczny 

Comments

W przyszłości chcę wykorzystać contenteditable div, ale nie mogę znaleźć rozwiązania, aby wyłączyć rozciąganie go po naduszeniu przycisku ENTER. Jeśli ktoś ma wiedzę jak zrobić aby div zachowywał się jak zwyczajny input to byłbym wdzięczny 

Możesz np. przez zdarzenie keydown przypisane do contenteditable div "wyłapać" kiedy został naciśnięty klawisz ENTER i wyłączyć domyślną akcję lub "obsłużyć" po swojemu.

Dawno temu padło tu pytanie o kolorowanie liter w takim contenteditable div-ie i pozostał taki kod, sprawdź to: https://codepen.io/vbservice/pen/ZEWWdLb

Answer 1

$(document).on("click", ".find_user div", ()=>{
    let c = $(".find_user div");
    for(let i = 0; i< c.length; i++){
        $(".find_user div#found-"+(i+1)).click(()=>{
            //hide 
            $("#chat_text").val($("#chat_text").val() + $(".find_user div#found-"+(i+1)).text())
        })
    }
})

Czemu nie ustawisz click event handlera na każdy #found-* od razu, korzystając z selektora atrybutu?

const $chatText = $("#chat_text")
$(document).on("click", ".find_user [id^=found-]", ({ target }) => {
  //hide 
  $chatText.val($chatText.val() + target.text());
})

Bo teraz masz zagnieżdżone click event handlery i pewnie dlatego reakcja jest dopiero na kolejny klik (obstawiam nawet, że przy każdym kolejnym kliku następuje kolejna duplikacja).

Trzy: To sytuacja kiedy mam @gre w środku lub na końcu zdania. Gdyby było inaczej to w dużym skrócie zrobiłbym coś w stylu poniższego kodu: 

Czyli chcesz wyciągać adnotację/ping, gdy @nick-jakiegoś-usera znajduje się w dowolnym miejscu stringa, a nie tylko na początku?

Pytanie dodatkowe: (...) wyłączyć rozciąganie go po naduszeniu przycisku ENTER. Jeśli ktoś ma wiedzę jak zrobić aby div zachowywał się jak zwyczajny input to byłbym wdzięczny 

Nie wiem czy tak się da - wizualnie można by na sztywno ograniczyć wysokość, ale wtedy pewnie zawartość po nowej linii będzie ucinana przez overflow. Może lepiej tutaj użyć textarea?

Comments

Twój kod rozwiązał cały problem. Delikatnie trzeba było go zmienić o :

... 
    $chatText.val($chatText.val() + $(target).text());   
...                                  

---

Czy cały problem to nie wiem, bo ten kod nie uwzględnia sprawdzania na jakiej pozycji w tekście jest adnotacja usera. :P

---

Szczerze mówiąc nie wiem dlaczego ale działa. Jeszcze raz dzięki!