title: Jquery Tagit to only allow entry by clicking on available tags under the Tagit input window
body: <p>Using Jquery Tagit.  I have the tagit input text window with predefined tags underneath the input window.<br>
  Clicking on the tags shown underneath populates the Tagit input text window - works fine.  I would like to prevent the user from typing in the text window and ONLY allow the clicking of the available tags shown underneath the input window.</p>
  
  <p>The code below allows the user to input custom tags, which I want to prevent.</p>
  
  <p>I thought the HTML "disabled" would work, but it seems to get overriden by the Tagit program.</p>
  
  <pre><code>&lt;div class="container"&gt;        
      &lt;form id="the_form" method='post' action="" enctype="multipart/form-data"&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="tags"&gt;For easy searching, choose the tags below or enter your own tags:&lt;/label&gt;
              &lt;input class="form-control" name="myTags" type="text" id="myTags" value=""&gt;
  
              &lt;p class="super_tag" data-tag="tag"&gt;One&lt;/p&gt;
              &lt;p class="super_tag" data-tag="tag"&gt;Two&lt;/p&gt;
              &lt;p class="super_tag" data-tag="tag"&gt;Three&lt;/p&gt;
              &lt;p class="super_tag" data-tag="tag"&gt;Four&lt;/p&gt;
  
          &lt;/div&gt;       
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){        
      //Add super tags to tagit window
      $(".super_tag").click(function(){
          var super_tag = $(this).text();
          $("#myTags").tagit("createTag", super_tag);
      });    
  });
  &lt;/script&gt;
  </code></pre>