Websocket自动完成显示奇怪的行为

Question

我有一个带有eventlistener 的文本input，它将通过websocket 将当前值发送到服务器。然后服务器用一个匹配的 json 数组来回答。匹配项将附加到输入下方的div，并且事件侦听器将添加到它们，以便它们在单击时更改输入的值。 但是我得到的是：键入一个字母即可完成文本，而无需单击div 中的任何a 元素。此外，我无法更改文本（例如删除字符）。

以下是我的代码：

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