javascript - jquery ui 自动完成 + websockets 实现

Question

如何使用 nodejs、sockjs 和 jquery ui 自动完成功能实现自动完成？

这是脚本部分

function DocumentReady() {
    $("#movieTitle").autocomplete({
        minLength: 3,
        source: function() {
            var title = $("#movieTitle").val();
            sock.send(title);
        },
        delay: 1000
    })
}

$(document).ready(DocumentReady);


var sock = new SockJS('http://localhost:9999/ws');

sock.onopen = function() {
    console.log('open');
};
sock.onmessage = function(e) {
    console.log('message', e.data);
};
sock.onclose = function() {
    console.log('close');
};

我正在将数据发送到服务器，并且我正在毫无问题地接收到 json 响应。我不知道应该在自动完成的源函数或 onmessage 事件中放入什么，以便在收到数据后填充自动完成列表。

Answer 1

处理此问题的一种方法是有效地使用队列。当您在此自动完成小部件中输入内容时，将搜索词排队。当您收到来自 sockjs 的消息时，出列并添加自动完成的建议。

这是此方法的一个基本示例(仅客户端，如您所述，服务器工作正常):

$(document).ready(function() {
    $("#movieTitle").autocomplete({
        source: function(request, response) {
            sock.send(request.term);
            pending.push(response);
        }
    });
});

var pending = [];
var sock = new SockJS('http://localhost:9999/ws');
sock.onmessage = function(e) {
    var response = pending.shift();
    response($.parseJSON(e.data));
};

如果你觉得没有必要对多个查询进行排队，你可以从源选项中保存最新的“响应”参数。然后，在 onmessage 处理程序中，您接受这个保存的回调并显示收到的建议。