将Bootstrap 3 Typeahead与Bootstrap标签集成

dcclassics

我试图整合引导3插件事先键入的内容(主要是从旧的引导预输入功能的端口它在引导3移除之前,如果我理解正确的话)与引导-Tagsinput插件

我没有问题让它们单独工作,包括JSON预取预输入功能。我不明白如何将两者融合在一起。我认为应该不会太难,但是我显然缺乏对Javascript的了解。

这是我的输入字段:

<input type="text" id="tagFilter" data-provide="typeahead" data-role="tagsinput">

这是在Javascript中调用typeahead插件的方式:

//The typeahead
$.get('tags.php', function(data){
    $("#tagFilter").typeahead({ source:data });
    },'json');

如果有帮助,Tagsinput在其文档中有一个示例,说明如何实现twitter typeahead.js:

$('input').tagsinput();

// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
  prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));

但我使用的是其他插件。我发现一个人在我头上。

再次感谢。

dcclassics

好的...所以我实际上已经决定使用Twitter typeahead.js,因为我设法使其正常运行。我使用了以下代码,如果不是最佳方法,请指出。

<input type="text" id="tagFilter" data-provide="typeahead" value="test,arlington">

$('#tagFilter').tagsinput({
    typeahead: {
       source: $.get('tags.php')
    }
    });

我的tags.php文件只是一个列表,我认为要使其与JSON文件中带有键的关联数组一起使用,还需要做很多工作。我决定对我的情况没有任何好处,因为我只关心用于查询目的的标签名称。

所以我的tags.php只是回显以下结果:

//the mySQLi query is above...
while ($row = mysqli_fetch_assoc($result)) {
        $tags[] = $row['tag_name'];

    }
echo json_encode($tags);

希望有人能受益。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

集成bootstrap 3 typeahead和将对象输入的标签作为标签

来自分类Dev

Bootstrap 3 Typeahead Ajax

来自分类Dev

Bootstrap 3:将图片居中

来自分类Dev

集成bootstrap-tagsinput,boostrap3-typeahead和Bloodhound的问题

来自分类Dev

集成bootstrap-tagsinput,boostrap3-typeahead和Bloodhound的问题

来自分类Dev

将Twitter Bootstrap popover与D3.js集成

来自分类Dev

将simple_form与bootstrap 3集成

来自分类Dev

将simple_form与bootstrap 3集成

来自分类Dev

无法将Datatables与Bootstrap 3集成

来自分类Dev

Bootstrap 3:“嵌套”标签

来自分类Dev

使用Bootstrap 3将标签置于输入上方

来自分类Dev

在Bootstrap 3中将标签放在Radio之前

来自分类Dev

使用Bootstrap 3将标签居中于输入上方

来自分类Dev

将bootstrap 3 col转换为bootstrap 2

来自分类Dev

如何在SPFX的末尾将Script标签集成到body标签中

来自分类Dev

Bootstrap 3将文字环绕图像

来自分类Dev

Bootstrap 3将元素对齐成圆圈

来自分类Dev

Bootstrap 3 Typeahead不会出现

来自分类Dev

Bootstrap3 Typeahead - 空消息

来自分类Dev

typeahead bootstrap3:如何将参数传递到远程?

来自分类Dev

如何将CSS <style>标签集成到Smarty模板中?

来自分类Dev

在Rails 4上使用haml将Bootstrap 3集成到simple_form

来自分类Dev

使用JSON数据输入的bootstrap typeahead标签

来自分类Dev

将Bootstrap集成到Codeigniter

来自分类Dev

Bootstrap 3标签-扩展标签的宽度100%

来自分类Dev

Bootstrap 3标签-扩展标签的宽度100%

来自分类Dev

AngularJS ngModel在ui-bootstrap标签集中不起作用

来自分类Dev

为什么我在angular-bootstrap标签集中出现了nonassign错误?

来自分类Dev

如何在Bootstrap 3中将标签移动到复选框的左侧?

Related 相关文章

热门标签

归档