Как я могу использовать Twitter Typeahead с SignalR, чтобы получать предложения автозаполнения

Приведенный ниже javascript на стороне клиента не работает, так как код завершается до заполнения cb. Заполнение cb в функции done SignalR завершается ошибкой, так как уже слишком поздно, поскольку вызов является асинхронным.

Как я могу заполнить source с помощью SignalR в ответ на ввод данных пользователем в текстовое поле ввода?

    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
person Reid    schedule 11.10.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

К счастью, я нашел программно инициировать событие typeahead с помощью jquery который дал мне ответ по аналогии. Таким образом, SignalR может заполнять предложения Twitter Typeahead.

Ответ в моем случае был в настройке source, как вы видите ниже. Из этого я узнал, что вызов функции обратного вызова может и должен выполняться только внутри сегментов done или fail, которые запускаются, когда вызов сервера 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');
    });

ОБНОВЛЕНО 11 сентября 2015 г. для работы с 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 не показывает подсказки, как ожидалось

person Reid    schedule 12.10.2014