웹 소켓 자동 완성은 이상한 동작을 보여줍니다

Question

websocket을 통해 현재 값을 서버에 보낼 eventlistener의 텍스트 input이 있습니다. 그런 다음 서버는 일치하는 json 배열로 응답합니다. 일치 항목은 입력 아래 div에 추가되고 이벤트 리스너가 추가되어 클릭시 입력 값이 변경됩니다. 그러나 내가 얻는 것은 : div에있는 어떤 a 요소도 클릭하지 않고 한 글자를 입력하면 텍스트가 완성됩니다. 또한 텍스트를 변경할 수 없게됩니다 (예 : 문자 삭제). 어떻게 만 클릭이 input의 텍스트를 변경하고 변경할 수없는 문제를 해결 것으로 달성 할 수

@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)); 
} 

:

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'); 
    } 
} 

다음은 서버 측 코드 :

다음

내 코드입니다 이후 텍스트 (jQuery를 사용하지 않고)?

Answer 1

setSearchboxText 함수를 콜백으로 설정하지 않고 호출하고 있습니다.

이 텍스트를 편집 할 수 없다는 고정하여

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

,

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