how to test / interact with AJAX autocomplete and Capybara / Poltergeist - ruby

Question

I am trying to interact with an external website at: http://is.gd/LtgYEk
I need to be able to fill in the input with id="textOrigen" here is the html
<p>
<label class="form-label">Departing from:</label>
<span class="label-field">
<input type="text" autocomplete="off" onblur="onblur2('textOrigen');" onfocus="initID('textOrigen');" size="17" id="textOrigen" name="text" maxlength="40" style="position:static;color: #505050;">
<select style="display:none" onchange="clearValidate(); Origen();" class="validate[dynamic]" id="cmbOrigen" name="cmbOrigen">
<option value="-1" selected="selected">Origin</option>
</select>
<label class="label-error" id="lblerrorOrigen"></label>
</span>
</p>
I put together a simple ruby script using 'capybara/poltergeist'
I am unable to replicate the browser behavior, which is:
on click the input field default value is highlighted thus being deleted as you start typing.
I lost track of all different variations I tried, but tried many. I found another SO post which seemed somewhat useful but it didn't help
This is the last revision of the method to fill this field:
def session.fill_autocomplete(field, options = {})
execute_script %Q{ $('##{field}').trigger('focus') }
fill_in field, with: options[:with]
execute_script %Q{ $('##{field}').trigger('focus') }
execute_script %Q{ $('##{field}').trigger('keydown') }
selector = %Q{#output div:contains('#{options[:with]}')}
execute_script "$(\"#{selector}\").mouseenter().click()"
end
As I wrote the script is very simple, the only other relevant bit is when the session is instantiated with:
session = Capybara::Session.new(:poltergeist)
Any help would be greatly appreciated.

Answer 1

I noticed that using the right version of phantomjs is fundamental.
Although 2.x is out, I noticed that phantomjs 1.8.2 behaves much more as expected and is way less buggy.
I'm currently testing autocompleted fields in RailsAdmin with success without using any delay technique.
def fill_in_autocomplete(selector, text)
find(selector).native.send_keys(*text.chars)
end
def choose_autocomplete_entry(text)
find('ul.ui-autocomplete').should have_content(text)
page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
end
An example selector for fill_in_autocomplete would be:
".author_field .ui-autocomplete-input"

Answer 2

I found the solution after testing in many ways.
The key was to add some delay to allow the auto suggest div to be populated.
Here is the method that worked:
def session.fill_city(field, options = {})
sleep 3
script = %Q{ $("#{field}").focus().keypress().val("#{options[:with]}") }
execute_script(script)
sleep 2
find('#output').find('div').trigger('click')
end