Twitter Typeahead没有显示建议

时间:2018-04-04 17:27:17

标签: javascript jquery typeahead preload bloodhound

我遇到了在Wordpress中使用跟踪代码管理器进行推特预订的问题。

跟踪代码管理器正在运行。

从我可以看到所有js脚本正在加载和json php文件IS预加载。在检查员中验证。

如果重要,此标记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是一个字符串,我认为这个函数处理一个对象数组。我该如何更改它以便它只使用字符串?

感谢您的帮助和建议!

1 个答案:

答案 0 :(得分:0)

我无法让Twitter Typeahead与Tag Manager一起使用。所以我使用了jQuery UI Autocomplete。这很棒!所以使用相同的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>

我希望我能走这条路。漂亮,干净,简单的代码。