Twitter Typeahead 不显示建议

Question

我在使用 Wordpress 中的标签管理器进行 Twitter 预输入时遇到问题。

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

据我所知，所有 js 脚本都在加载，json php 文件正在预加载。在检查器中验证。

如果重要的话，这个标签 div 位于 bootstrap 网格内。

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 是一个字符串，我认为这个函数处理一个对象数组。我该如何更改它以便它只使用字符串？

感谢您的帮助和建议！

Answer 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>

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

Twitter Typeahead 不显示建议

Twitter Typeahead not showing suggestions

javascript

jquery

typeahead

preload

bloodhound