title: Focusout with autocomplete
body: <p>I'm trying to figure out how to direct the focus on these objects to get auto complete to go away when it's not needed. </p>
  
  <p>I'll post the code and then explain what I've tried. The only issue with writing too much is that it scares some people away so I'll be brief yet thorough!</p>
  
  <p>This is the library I'm using <a href="http://complete-ly.appspot.com/" rel="nofollow noreferrer">http://complete-ly.appspot.com/</a></p>
  
  <p>JQuery </p>
  
  <p>var autocontainer = link.siblings('.food-input-div');
             autocontainer.show();
             link.hide();</p>
  
  <pre><code>       var autoobj = completely(autocontainer[0]);
         autoobj.options = ['chicken', 'cheese', 'chobani', 'chocolate', 'chum', 'cherries', 'coka-cola', 'coconut', 'crack', 'cocain', 'creme brule'];
         autoobj.repaint();
  
         autoobj.input.focus();
  
         var wrapper = $(autoobj.wrapper);
  
         console.log(wrapper);
         console.log(document.activeElement);
  
         wrapper.attr("tabindex", "0");
         wrapper.focusout(function() {
             autocontainer.hide();
             link.show();
             this.remove();
         });            
  </code></pre>
  
  <p>The DOM</p>
  
  <pre><code>      &lt;td class="left"&gt;
          &lt;a class="add-food-link"&gt;+ Add food&lt;/a&gt;
          &lt;div class="food-input-div" style="display:none;"&gt;&lt;/div&gt;
        &lt;/td&gt;  
  </code></pre>
  
  <p>Complete.ly adds code similar to this directly inside the 'food-input-div' element</p>
  
  <pre><code>    &lt;div&gt;
      &lt;div&gt;
      &lt;input&gt;
      &lt;input&gt;
      &lt;div&gt;
      &lt;div&gt;list item&lt;/div&gt;
      &lt;div&gt;list item&lt;/div&gt;
      &lt;div&gt;list item&lt;/div&gt;
      &lt;div&gt;list item&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My Jquery gives the first 'wrapper' element of complelys code a tabindex of 0 so that it is able to having a focus. </p>
  
  <p>The issue is this:</p>
  
  <p>When I click the link:
    * Link is removed
    * completely box is rendered
    * completely wrapper input has focus</p>
  
  <p>When a item from the dropdown is clicked:
    * Everything is removed and link is rendered</p>
  
  <p>I don't understand why this is happening because focusout is bound to those individual element's parent element. </p>
  
  <p>I toyed around with the assumption that children elements receive focus here and found that is false. <a href="http://jsfiddle.net/adiakritos/nU988/" rel="nofollow noreferrer">http://jsfiddle.net/adiakritos/nU988/</a></p>
  
  <p>So now I need to get it so that only when ANY element outside of "food-input-div" is clicked, said element and it's children are removed, and the link is redisplayed. </p>
  
  <p>How do I do this? </p>
  
  <hr>
  
  <p>Playing with this right now:</p>
  
  <p><a href="https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it">Use jQuery to hide a DIV when the user clicks outside of it</a></p>
  
  <hr>
  
  <p>This is the code I have working nicely right now. Except I still can't click list items. </p>
  
  <pre><code>       $(document).mouseup(function (e){
  
           if (!wrapper.is(e.target) &amp;&amp; wrapper.has(e.target).length === 0){
  
             autocontainer.hide();
             link.show();
             autoobj.wrapper.remove();
             console.log(e);
  
           };
         }); 
  </code></pre>
  
  <p>Now when I get click the drop down e.target returns the element directly under the div I'm clicking. </p>
  
  <p>So if I click "cheese" and there's a h4 element that is part of the layout under it, e.target returns that h4 instead of the drop down div list item. </p>
  
  <hr>
  
  <p>Implementing Dropped.On.Caprica's Code</p>
  
  <pre><code>    var showFoodSearch = function(link) {
         var autocontainer = link.siblings('.food-input-div');
         autocontainer.show();
         link.hide();
  
         var autoobj = completely(autocontainer[0]);
         autoobj.options = ['chicken', 'cheese', 'chobani', 'chocolate', 'chum', 'cherries', 'coka-cola', 'coconut', 'crack', 'cocain', 'creme brule'];
         autoobj.repaint();
         autoobj.input.focus();
  
         var wrapper = $(autoobj.wrapper);
  
          wrapper.on('blur', 'input', function(){
  
             autocontainer.hide();
             link.show();
             autoobj.wrapper.remove();
             $(document).mouseup(function(e){
                  console.log(e.target);
             });
  
          });
  
      };      
  </code></pre>
  
  <p>Same exact behavior as described above this try. </p>