Twitter Typeahead 未显示建议答案

【问题标题】：Twitter Typeahead not showing suggestionsTwitter Typeahead 未显示建议
【发布时间】：2018-04-04 17:27:17
【问题描述】：

我在使用 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);
});

所以我尝试使用他们网站上的示例进行预取，只进行很少的更改。我只是不明白为什么它不起作用。

查看示例的源代码时，我看到它呈现了 pre 元素，然后填充了建议。我没有看到它在我的源代码中这样做。

任何帮助或建议将不胜感激。这几天我一直在搞砸这个东西，它就是不想工作。

这主要是工作，但线路有问题

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

我的 JSON 是一个字符串，我认为这个函数处理一个对象数组。我将如何更改它以便它只使用字符串？

感谢您的帮助和建议！

【问题讨论】：

标签： javascript jquery typeahead preload bloodhound

【解决方案1】：

我无法让 Twitter Typeahead 与跟踪代码管理器一起使用。所以我改为使用 jQuery UI 自动完成。这很好用！所以使用相同的 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>

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

【讨论】：