找到你要的答案

Q:Typeahead in Bootstrap Tags input plug in not working

Q:在不工作在引导标签输入插头typeahead

I am trying to use Bootstrap Tags Input (http://timschlechter.github.io/bootstrap-tagsinput/examples/) in a small test application. I would like to use the typeahead function but cant seem to get it working. It appears to me like I have everything in order but I just cant seem to get the typeahead to work. Note that I am using this in Django - the bootstrap.min.js loads up in my base.html file. I am new to jquery so I'm sure I'm screwing up something in my script.

{% extends "base.html" %}

{% block title %}Testing{% endblock %}
{% block extra_head %}

    <link href="{{STATIC_URL}}css/snippets.css" rel="stylesheet">
    <script src="{{STATIC_URL}}js/bootstrap-tagsinput.js"></script>
    <link href="{{STATIC_URL}}css/bootstrap-tagsinput.css" rel="stylesheet">


<script>
     $('#tagtest').tagsinput({
        typeahead: {
        source: ['Amsterdam','Denver']
        }
      });
</script>
    {% endblock %}


{% block base_content %}

<input id ="tagtest" data-role="tagsinput" type="text"  value="Amsterdam,Washington"/>

{% endblock %}

Any thoughts would be greatly appreciated/ TJS

我试图用引导标签输入(http://timschlechter.github.io/bootstrap-tagsinput/examples/)在一个小的测试中的应用。我想用Typeahead功能但似乎无法得到它的工作。在我看来像我所拥有的一切,但我似乎无法得到Typeahead工作。请注意,我用这个在Django的bootstrap.min.js负载在我的base.html文件。我是新来的jQuery的所以我相信我搞砸了的东西在我的剧本。

{% extends "base.html" %}

{% block title %}Testing{% endblock %}
{% block extra_head %}

    <link href="{{STATIC_URL}}css/snippets.css" rel="stylesheet">
    <script src="{{STATIC_URL}}js/bootstrap-tagsinput.js"></script>
    <link href="{{STATIC_URL}}css/bootstrap-tagsinput.css" rel="stylesheet">


<script>
     $('#tagtest').tagsinput({
        typeahead: {
        source: ['Amsterdam','Denver']
        }
      });
</script>
    {% endblock %}


{% block base_content %}

<input id ="tagtest" data-role="tagsinput" type="text"  value="Amsterdam,Washington"/>

{% endblock %}

Any thoughts would be greatly appreciated/ TJS

answer1: 回答1:

If you're using bootstrap 3 this can be normal because typeahead has been removed. Add this typeahead js file Link to typeahad version which works with bootstrap 3

If you're using bootstrap 3 this can be normal because typeahead has been removed. Add this typeahead js file Link to typeahad version which works with bootstrap 3

answer2: 回答2:

For anyone struggling with getting typeahead to work when working with Bootstrap 2.x: if you attach tagsinput to your input element by its id, so like:

$('#tagtest').tagsinput({...});

then DON'T set a data-role="tagsinput" on your input element.

任何人在得到typeahead工作引导2时。X:如果你把你的tagsinput输入元素的ID,所以喜欢:

$('#tagtest').tagsinput({...});

那就不要设置data-role=“tagsinput”在您的输入元件。

jquery  django  twitter-bootstrap  bootstrap-typeahead