Блог

Я использую typeahead для извлечения предложений из базы данных с помощью приведенного ниже кода, они доставляются в виде массива объектов, и я добавляю первое значение в предложение, а затем мне нужно, чтобы второе выводилось как класс вокруг результата.

Например, span class=»flag-{val 1}»> Предложение

Любая помощь с благодарностью.

 $('#typeahead').typeahead(null, {
    source: function(query, process) {
        $.ajax({
            url: 'source.php',
            type: 'POST',
            data: 'query='   query,
            dataType: 'JSON',
            async: true,
            success: function (data) {
                var suggestions = [];
                $.each(data, function(key, val) {
                    var obj = {};
                    obj.label = val;

                    suggestions.push({ value: val[0] });
                    console.log( {value: val[0]}, {value: val[1]});
                });
                return typeof data == 'undefined' ? false : process(suggestions);
            }
        }); 
    }
});
  

Я использую undercorejs для создания шаблонов, это добавляет функцию компиляции к подчеркиванию. Typeaheadjs использует компиляцию при сборке из шаблонов.

 _.compile = function(templ) {
    var compiled = this.template(templ);
    compiled.render = function(ctx) {
        return this(ctx);
    }
    return compiled;
} 
  

Согласно примерам на странице github, теперь вы можете использовать шаблоны.

По дороге домой с работы мне пришло в голову, что я мог бы попробовать это:

 suggestions.push({ value: '<span class="flag flag-' val[1] '">' val[0] '</span>' });
  

и на самом деле не нужно было бы усложнять ситуацию, изменяя шаблоны typeahead. Это работает! 🙂

В дополнение к этому — добавляя разметки диапазона во входные данные, я создал функцию для их удаления… $(document).on(‘нажать клавишу : фокус: активный’, ‘.tt-предложение’, функция (e){ cleanSuggestion (); e.preventDefault(); });

     $(document).on('keydown', '.tt-input, .typeahead, .tt-hint', function(e){
        if(e.which == 38||e.which == 40||e.which == 13) {
            cleanSuggestion ();
        }
    });

    $(document).on('blur', '.tt-input', function(e){
        setTimeout(function(){
            cleanSuggestion ();
        }, 1);
    });     

    function cleanSuggestion () {
        var registeredValue = $('#registered-stallion').attr('value') 
        registeredValue = registeredValue.replace(/(<([^>] )>)/ig,"");
        $('#registered-stallion').attr('value', registeredValue);           
    }
  

по какой-то причине функция размытия будет работать только с тайм-аутом, так как я не мог точно видеть, где typeahead повторно использовал свою функцию здесь..