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

Question

我有一个带有事件监听器的文本输入，它将通过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));
}

如何才能实现仅单击一次即可更改输入的文本并修复之后无法更改文本的问题(不使用 jQuery)？

Answer 1

您正在调用 setSearchboxText 函数，而不是将其设置为回调。

改变你的

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

至

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