Question

下面的客户端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');
    });

Answer 1

我很高兴地发现trigger the typeahead event programmatically using jquery给了我类比答案。因此，SignalR可以填充Twitter Typeahead建议。

我的答案就是设置 source ，如下所示。从那里我了解到调用回调函数可以 - 而且必须 - 只能在完成或失败段内完成，这些段在对SignalR服务器的调用执行时会运行异步返回。它是回调方法，可以显示建议。

    <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

如何使用Twitter Typeahead和SignalR来获取自动填充建议

1 个答案: