title: Bootstrap input dropdown, change activation behavior
body: <p>I'm trying to implement a dropdown box to show search options, much the way the Stack Overflow tag search box works. The search itself is working great, but I can't get the box to show up at the right times.</p>
  
  <p>Here's the template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
      &lt;input class="entryInput" id="query" name="query" type="text"
          data-toggle="dropdown"/&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="query"&gt;
          {{#each queryResults}}
              &lt;li&gt;&lt;a class="result" data-id="{{_id}}"&gt;{{firstname}}&lt;/a&gt;&lt;/li&gt;
          {{/each}}
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works, and the list displays in the dropdown, but it displays an empty stub when the input is first clicked (see my screencap to see what that empty stub looks like), and disappears when I begin typing.</p>
  
  <p>Elsewhere in my app, I manage <code>Session.get('query')</code> and <code>Session.get('queryPopulated')</code>, which are the values I want this dropdown to react to. <code>query</code> is simply storing the query itself in real-time, and <code>queryPopulated</code> is a boolean that is set when the user <strong>chooses</strong> a result. I want the dropdown to stay active as long as these things are true:</p>
  
  <ul>
  <li>the input has focus;</li>
  <li>the <code>query</code> is valid (so no showing a lame stub);</li>
  <li>and <code>queryPopulated</code> is false (because there's no more reason to display, the user chose a result).</li>
  </ul>
  
  <p>The <a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow noreferrer">Bootstrap docs</a> only provide a <code>toggle</code> method, and that just isn't really fine-grained enough. I need to manually take control of the dropdown's reactions, and I'm not sure how to do that with the events and methods it's exposed.</p>
  
  <p>How do I override the behavior?</p>
  
  <p>Here's what that lame stub looks like.</p>
  
  <p><img src="https://i.stack.imgur.com/9jgrR.png" alt="Here&#39;s what that lame stub looks like."></p>
  
  <p>Thanks in advance!</p>
  
  <h2>Update</h2>
  
  <p>I now have this javascript managing the dropdown:</p>
  
  <pre class="lang-js prettyprint-override"><code>Template.entryStudentInput.rendered = function() {
      $('.dropdown').on('shown.bs.dropdown', function(){
          console.log('show');
          if(!Session.get('query')) {
              console.log('query is false in show');
              $('.dropdown').dropdown('toggle');
          }
      });
  };
  </code></pre>
  
  <p>That block above successfully prevents the dropdown from showing when empty, but I can't get the dropdown to show again once the query is valid.</p>
  
  <p>Here's another block, meant only as an experiment, reacting to key events:</p>
  
  <pre><code>Template.entryStudentInput.events({
      'keyup #query': function(e, t) {
          console.log('should toggle');
          $('dropdown').dropdown('toggle');
          // These didn't work either.
          // $(t.find('.dropdown')).dropdown('toggle');
          // t.find('.dropdown').dropdown('toggle');
      }
  });
  </code></pre>
  
  <p>It should simply toggle back and forth every time a key is pressed, but it doesn't do anything at all. The <code>console</code> log shows up just like it should, but there's no change whatsoever on the dropdown. It seems like I just have no control over the dropdown from anywhere but the <code>$('.dropdown').on</code> event handlers.</p>