title: Casperjs: testing jquery autocomplete
body: <p>I'm having trouble interacting with a jquery auto-complete input box with casperjs.  I've tried many different ways, but I can't seem to select the auto complete option when the list of options pops up.  </p>
  
  <p>My code is as follows:  </p>
  
  <pre><code>casper.thenEvaluate(function() {
    $('#myInput').val('cars');  // fill in the text box
    $('#myInput').blur();  // should trigger the autocomplete ajax call
    $('.ui-autocomplete li.ui-menu-item:nth-of-type(1)').click(); // should click the first item in the list
  });
  
  // take a picture to make sure it worked
  casper.then(function() {
    this.captureSelector('pics/test1.png', '#theForm');
  });
  </code></pre>
  
  <p>This doesn't work at all, even though it looks like it should.  By playing around with it, I've found that triggering a down arrow keypress a few times triggers the auto complete to show up, so here is a version that is closer to working.  This works in the browser, but not in a casper.thenEvaluate block for some reason.</p>
  
  <pre><code>$('#myInput').val('cars');  // fill in the text box
  var e = jQuery.Event("keydown");
  e.which = 40; // press down arrow a few times, not sure why this works
  $("#myInput").trigger(e);
  $("#myInput").trigger(e);
  $('.ui-autocomplete li.ui-menu-item:nth-of-type(1)').click();
  </code></pre>