Twitter Typeahead не показывает предложения

У меня проблемы с опережающим вводом текста в твиттере при работе с диспетчером тегов в Wordpress.

Менеджер тегов работает.

Из того, что я вижу, все сценарии js загружаются, а файл json php предварительно загружается. Проверено в инспекторе.

Этот тег div расположен внутри сетки начальной загрузки, если это имеет значение.

HTML

            <div class="span6 cs_gray_t">
                <div id="prefetch">
                    <input type="text" name="tags" id="inTags" placeholder="Enter Tags" class="typeahead tm-input tm-tag-success" autocomplete="off" size="20" />
                </div>
                <p>Text...</p>
                <p>Text...
<!-- list a few random tags to help get them started --> 
<?php
    $i = 1;
    foreach ($topCharTags as $ts){
        echo $ts;
        if ($i < 10){
            echo ", ";
        }
        $i++;
    }
?>
                </p>
            </div>

Это блок HTML, а вот мой JS.

 var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: '../../../wp-content/themes/ata-child-files/js/json-tagbuild.php'
});

countries.initialize();

console.log(countries);
var tagApi = jQuery(".tm-input.tm-input-typeahead").tagsManager({
    prefilled: [<?php echo $existingTags ?>],
    blinkBGColor_1: '#FFFF9C',
    blinkBGColor_2: '#CDE69C',
    maxTags: 20,
    tagsContainer: "#divTagBox"
});
jQuery(".tm-input.tm-input-typeahead").typeahead(null, {
  source: countries.ttAdapter()
}).on('typeahead:selected', function (e, d) {
    tagApi.tagsManager("pushTag", d.name);
});

Поэтому я пытаюсь использовать пример с их веб-сайта для предварительной выборки с очень небольшими изменениями. Я просто не могу понять, почему он не работает.

Глядя на источник примера, я вижу, что он отображает предварительные элементы, которые затем заполняются предложениями. Я не вижу, чтобы он делал это в моем источнике.

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

Это в основном работает, но есть проблема с линией

source: countries.ttAdapter()
}).on('typeahead:selected', function (e, d) {
    tagApi.tagsManager("pushTag", d.name);

Мой JSON — это строка, и я думаю, что эта функция работает с массивом объектов. Как бы я изменил это, чтобы он просто использовал строку?

Спасибо за вашу помощь и предложения!


javascript jquery typeahead preload bloodhound
person user1518699    schedule 04.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мне не удалось заставить Twitter Typeahead работать с диспетчером тегов. Поэтому вместо этого я использовал автозаполнение пользовательского интерфейса jQuery. Это сработало отлично! Поэтому, используя тот же HTML, я использую этот JS. Я просто повторяю свой запрос JSON как var, и он отлично работает!

<script type="text/javascript">

jQuery(".tm-input").tagsManager({
    prefilled: [<?php echo $existingTags ?>],
    blinkBGColor_1: '#FFFF9C',
    blinkBGColor_2: '#CDE69C',
    maxTags: 20,
    tagsContainer: "#divTagBox"
});

</script>

<?php
$sqlJSON = "
    SELECT DISTINCT
      fyxt_tax_list.tax_term
    FROM
      fyxt_tax_list
    ORDER BY
      fyxt_tax_list.tax_term";
$resultJSON = $wpdb->get_col($sqlJSON);
?>

<script>
jQuery(document).ready(function($) {      
  $( function() {
    var availableTags = <?php echo json_encode($resultJSON); ?>;
    $( "#inTags" ).autocomplete({
      source: availableTags
    });
  });
});
</script>

Хотел бы я просто пойти по этому пути. Хороший, чистый и простой код.

person user1518699    schedule 06.04.2018