title: jQueryUI autocomplete 'select' does not work on mouse click but works on key events
body: <p><strong>JS/JQuery:</strong></p>
  
  <pre><code>$this.find('input').autocomplete({
      source: "/autocomplete_tc_testcasename", 
      minLength: 2,
      focus: function(e,ui){
          $(this).val(ui.item.label);
          return false;
      },   
      select: function(e, ui) {
          console.log("Selected: "+ui.item.value);
      }    
  }); 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>        .ui-autocomplete {
              max-height: 200px;
              overflow-y: auto;
              padding: 5px;
          }   
          .ui-menu {
              list-style: none;
              background-color: #FFFFEE;
              width: 50%;
              padding: 0px;
              border-bottom: 1px solid #DDDDDD;
              border-radius: 6px;
              -webkit-box-shadow: 0 8px 6px -6px black;
              -moz-box-shadow: 0 0px 0px -0px black;
              box-shadow: 0px 2px 2px 0px #999999;
          }   
          .ui-menu .ui-menu {
          }
          .ui-menu .ui-menu-item {
              color: #990000;
              font-family:"Verdana";
              font-size: 12px;
              border-top: 3px solid #DDDDDD;
              background-color: #FFFFFF;
              padding: 10px;
          }
  </code></pre>
  
  <p><strong>Problem Summary:</strong></p>
  
  <ul>
  <li>AJAX works fine, I get all the entries correctly in the autocomplete menu.</li>
  <li>I am able to use key up/down arrows to select menu items and once I hit return, select event is fired correctly and console message is displayed.</li>
  <li>I can focus on ui-menu-items successfully and capture mouse over events to change value of input text.</li>
  <li>I cannot seem to click on menu item and fire a select event. i.e when I click on a menu item, console message is never displayed.</li>
  <li>It is as if the click event is dismissing the menu and closing it instead of actually firing a select event. Any idea on how to get over this issue?</li>
  <li>I tried "appendTo : $this" instead to input's parent div, and then mouse click works fine! - select event gets fired and console message is displayed successfully. But that is not what I want since the menu is appended within the parent div which distorts the UI since they probably share the same z-index. Even if I change z-index to a higehr number in this case, it didn't quite help. So I'm looking for a solution where I don't 'have' to use appendTo if possible.</li>
  </ul>
  
  <p>I found various other questions quite in the ballpark, but none of these seem to address my question.</p>
  
  <p><a href="https://stackoverflow.com/questions/7961708/jquery-autocomplete-left-mouse-click-not-firing-select-event">jQuery Autocomplete - Left Mouse Click not firing Select event</a></p>
  
  <p><a href="https://stackoverflow.com/questions/7315556/jquery-ui-autocomplete-select-event-not-working-with-mouse-click">jQuery UI autocomplete select event not working with mouse click</a></p>
  
  <p>Thanks!</p>