Автозаполнение Websocket показывает странное поведение

Question

У меня есть текст input с eventlistener, который отправит текущее значение на сервер через websocket. Затем сервер отвечает массивом совпадений json. Матчи будут добавлены к div ниже ввода, и к ним будут добавлены прослушиватели событий, чтобы они меняли значение ввода при нажатии. Однако я получаю: ввод одной буквы завершает текст без нажатия на любой элемент a в div. Кроме того, я не могу изменить текст (например, удалить символы).

Ниже мой код:

var webSocket = new WebSocket('ws://' + location.hostname + ':' + location.port + '/autoComplete'); 
var searchbox = document.getElementById('searchbox'); 
var suggestions = document.getElementById('suggestions'); 

webSocket.onmessage = function (event) { 
    var results = JSON.parse(event.data); 

    var html = ''; 
    for(var result of results) { 
     html += '<a href="#" class="completer">' + result + '</a> '; 
    } 

    suggestions.innerHTML = html; 
    updateCompleterActions(); 
}; 

webSocket.onopen = function(event) { 
    searchbox.addEventListener('input', function() { 
     webSocket.send(searchbox.value); 
    }); 
}; 

webSocket.onclose = function(event) { 
    clearInterval(window.refresher); 
}; 

var updateCompleterActions = function() { 
    var elems = document.getElementsByClassName('completer'); 

    for(var elem of elems) { 
     elem.addEventListener('click', setSearchboxText(elem.innerHTML)); 
    } 
} 

var setSearchboxText = function(value) { 
    searchbox.value = value; 
    for(var elem of elems) { 
     elem.removeEventListener('click'); 
    } 
} 

Ниже приводится код на стороне сервера:

@OnWebSocketMessage 
public void message(Session s, String message) throws IOException { 
    // TODO: implement DB access here 
    List<String> words = Arrays.asList("Auto", "Baumhaus", "Peter", "fahren"); 
    List<String> matches = new ArrayList<>(); 

    for(String word : words) { 
     if(word.contains(message)) { 
      matches.add(word); 
     } 
    } 

    s.getRemote().sendString(gson.toJson(matches)); 
} 

Как я могу добиться того, что только щелчок изменит текст input и исправить неспособность изменить текст после (без использования jQuery)?

Answer 1

Вы вызываете функцию setSearchboxText, не устанавливая ее как обратный вызов.

изменить ваш

elem.addEventListener('click', setSearchboxText(elem.innerHTML)); 

в

elem.addEventListener('click', function(e) { 
    setSearchboxText(this.innerHTML); 
});