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 处理程序中，您获取这个保存的回调并显示收到的建议。