如何使用带有 SignalR 的 Twitter Typeahead 来获取自动完成建议答案

【问题标题】：How can I use Twitter Typeahead with SignalR to get autocomplete suggestions如何使用带有 SignalR 的 Twitter Typeahead 来获取自动完成建议
【发布时间】：2014-10-11 05:03:24
【问题描述】：

下面的客户端 javascript 不起作用，因为代码在 cb 被填充之前完成。在 SignalR done 函数中填充 cb 失败，因为调用是异步的，为时已晚。

如何使用 SignalR 填充 source 以响应用户输入到我的预输入文本框？

    var tonameSource = function (query, cb) {

        setTimeout(function () {
            var prefix = $('#toname').val();
            var myCBval = [];
            talk.server.getpcont(prefix, ConnectionId)
                    .done(function (mmID) {
                        $.each(mmID, function () {
                            var myOBJ = this;
                            myCBval.push({
                                name: myOBJ.name,
                                ID: myOBJ.ID
                            });
                        });
                    }).fail(function (error) {
                        //
                    });              

            cb(myCBval);

        }, 300)
    };

    $(".tt-toname").typeahead(null, {
        minLength: 2,
        source: tonameSource,
        displayKey: 'name',
    }).on('typeahead:selected', function (obj, datum) {
        //$(".tt-name").typeahead('val', datum.name).typeahead('close');
    });

【问题讨论】：

标签： jquery asp.net-mvc signalr twitter-typeahead

【解决方案1】：

很高兴我找到了trigger the typeahead event programmatically using jquery，它通过类比给了我答案。因此 SignalR 可以填充 Twitter Typeahead 建议。

我的答案是设置 source，如下所示。从中我了解到，调用回调函数可以而且必须只在调用 SignalR 服务器时运行的 done 或 fail 段内完成异步返回。并且它是产生建议显示的回调方法。

    <div class="typeahead-wrapper">
       <input class="tt-toname" id="toname" name="toname" type="text" placeholder="Enter name" />
    </div>

（建议跳过此部分更新！）

    $(".tt-toname").typeahead(null, {
        minLength: 2,    

        // begin source      
        source: function (query, process) {
            var prefix = $('#toname').val();
            var myCBval = [];// my callback value

            // "talk" is = $.connection.talkHub; and set elsewhere globally
            //getpcont is a custom SignalR method that is on the server
            talk.server.getpcont(prefix, ConnectionId) 
                    .done(function (mmID) {
                        $.each(mmID, function () {
                            var myOBJ = this;
                            myCBval.push({
                                name: myOBJ.name,
                                ID: myOBJ.ID
                            });
                            process(myCBval);//process is a callback method
                        });
                    }).fail(function (error) {
                        process([]);//process is a callback method, don't know if this is necessary here, but will produce no suggestions
                    });
        }
        // end source

        ,
        displayKey: 'name',
    }).on('typeahead:selected', function (obj, datum) {
        //$(".tt-name").typeahead('val', datum.name).typeahead('close');
    });

已于 2015 年 9 月 11 日更新以使用 typeahead.js 版本 0.11.1 ------------------------

  $(".tt-toname").typeahead({
       // hint: true,
        //highlight: true,
        minLength: 2           
    }
        ,
        {
            name: 'myname',
            limit:10,
            source: function (q, sync, async) {

                talk.server.getcontacts(q, ConnectionId)
                        .done(function (data, status)
                        {
                            async(data);
                        }
                        ).fail(function (error) {
                            alert("in fail" + error);
                        });

            },
            displayKey: 'name'
        });

另见：Bootstrap Typeahead not showing hints as expected

【讨论】：