Attempting to integrate jQuery UI's autocomplete feature, but encountering issues with the CSS not being applied.
1) College list appears unstyled like a standard ul.
2) Unwanted message "11 results are available, use up and down arrow keys to navigate" is displayed.
Check out my website for a live example.
Desiring functionality similar to the default setup shown here.
Followed instructions here for installing jQuery UI, and here for adding themes.
The code provided needs styling adjustments. How can I achieve the desired look resembling the default example?
application.html.erb
<%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%>
<div id="search"> <%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %> </div>
<% end -%>
home.js
$("#search_field").autocomplete({
source: [
"Adelphi University",
"American University",
"Andrews University",
"Arizona State University",
"Ashland University",
"Auburn",
"Wheaton - Illinois",
"Wheaton - Massachusetts",
"Whitman",
"Wofford" ]
});
$("#search_text").submit(function() {
if ($("#search_field").val() == "Adelphi University")
{
window.location.href = "/adelphi-university";
return false;
}
else if ($("#search_field").val() == "American University")
{
window.location.href = "/american-university";
return false;
}
else if ($("#search_field").val() == "Andrews University")
{
window.location.href = "/andrews-university";
return false;
}
});
UPDATE (not sure if relevant, but...)
college.rb
class College < ActiveRecord::Base
attr_accessible :name, :url, ...
...
end
static_pages_controller.rb
def search
@colleges = College.search(params[:search])
end
UPDATE - Did I Install jQuery UI Themes Properly?
- Utilized this guide.
- Upon running
bundle install, following entries appeared:Using jquery-rails (2.2.1) Using jquery-tablesorter (1.5.0) Using jquery-ui-rails (4.0.4) Using jquery-ui-themes (0.0.11) application.cssincludes*= require jquery.ui.all *= require jquery-ui/smoothness *= require_self *= require_tree .- Confusion noted regarding "Helper" and "Rake Tasks". Situation doesn't seem applicable.
UPDATE - Development Environment
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all"_....