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

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

1 个答案: