Skip to content

Commit

Permalink
Merge pull request #183 from shaktik1989/autocomplete_feature
Browse files Browse the repository at this point in the history
Autocomplete feature, Closes #175, Thanks @shaktik1989
  • Loading branch information
scott authored Jun 14, 2016
2 parents a55fbe8 + 752107d commit 98fd9b7
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 2 deletions.
36 changes: 36 additions & 0 deletions app/assets/javascripts/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,42 @@ Helpy.ready = function(){
$(this).closest('.has-arrow').addClass('over');
});

$.ui.autocomplete.prototype._renderItem = function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item["name"] )
.append( "<div class='ui-menu-item-heading'><a href="+item["link"]+" >" + item["name"] + "</a></div>" )
.append( "<div class='ui-menu-item-content' >"+item["content"]+"</div>" )
.appendTo( ul );
};


$(".autosearch").keyup(function () {
var that = $(this)
value = $(this).val();
$(this).autocomplete({
source: function (request, response) {
jQuery.get("/"+location.href.split("/")[3]+"/search.json", {
query: value
}, function (data) {
response(data);
});
},
minLength: 3,
appendTo: that.next(),
focus: function( event, ui ) {
$(".autosearch").val(ui["item"]["name"]);
},
select: function( event, ui ) {
window.location.href = ui["item"]["link"];
},
messages: {
noResults: '',
results: function() {}
}

});

});

$('.stats').on('click', function(){

Expand Down
3 changes: 2 additions & 1 deletion app/assets/javascripts/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
//= require jquery_ujs
//= require jquery-ui/sortable
//= require jquery-ui/effect-highlight
//= require jquery-ui/autocomplete
//= require bootstrap-sprockets
//= require turbolinks
//= require jquery.turbolinks
Expand Down Expand Up @@ -103,4 +104,4 @@ $(document).on("click", '.truncate_more_link', function(){
}
return false;

});
});
3 changes: 3 additions & 0 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,6 @@

// Note: admin.scss is included separately via `layouts/admin.html.erb`.
@import "pick-a-color/build/1.2.3/css/pick-a-color-1.2.3.min";

// Import css for autocomplete
@import "autocomplete";
73 changes: 73 additions & 0 deletions app/assets/stylesheets/autocomplete.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
_width: 160px;
padding: 4px 0;
margin: 2px 0 0 0;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;

.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;

&.ui-state-hover, &.ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
}
.ui-state-focus{
border: 1px solid #999999;
background: #dadada;
color: #212121;
}

.ui-menu-item-heading{
text-align: left;
margin-left: 5px;
font-weight: bold;
font-size: 105%;
}

.ui-menu-item-content{
text-align: left;
margin-left: 5px;
color: #666;
}

.ui-menu-item{
margin-bottom: 1%;
}
}


29 changes: 29 additions & 0 deletions app/controllers/result_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,33 @@ def index
add_breadcrumb 'Search'
end

def search
@results = PgSearch.multisearch(params[:query]).first(10)
respond_to do |format|
format.json { render :json => serialize_autocomplete_result(@results).to_json.html_safe }
end
end

private

def serialize_autocomplete_result(results)
serialized_result = []
results.each do |result|
if result.searchable_type == "Topic"
serialized_result << {
name: result.searchable.name,
content: result.searchable.post_cache.truncate_words(20),
link: topic_posts_path(Topic.find(result.searchable_id))
}
else
serialized_result << {
name: result.searchable.title,
content: result.searchable.body.truncate_words(20),
link: category_doc_path(result.searchable.category_id, Doc.find(result.searchable_id))
}
end
end
serialized_result
end

end
4 changes: 3 additions & 1 deletion app/views/result/_search_form.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
<div class="form-group has-feedback right-inner-addon">
<%= form_tag result_path, method: :get, id: 'search-form', remote: (params[:controller] == 'result') do %>
<div class="input-group">
<%= text_field_tag('q', nil, placeholder: t(:search_placeholder, default: "Enter a keyword, topic, or question"), id: 'search-field', class: 'form-control', value: params[:q]) %>
<%= text_field_tag('q', nil, placeholder: t(:search_placeholder, default: "Enter a keyword, topic, or question"), id: 'search-field', class: 'form-control ui-autocomplete-input autosearch', value: params[:q]) %>
<div class="search-result-box">
</div>
<div class="input-group-btn">
<button type="submit" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search"></span>
Expand Down
1 change: 1 addition & 0 deletions config/initializers/pg_search.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
PgSearch.multisearch_options = { :using => { :tsearch => {:prefix => true, :dictionary => "english"} } }
1 change: 1 addition & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
post 'post/:id/vote' => 'posts#up_vote', as: :post_vote, defaults: { format: 'js' }
get 'thanks' => 'topics#thanks', as: :topic_thanks
get 'result' => 'result#index', as: :result
get 'search' => 'result#search', as: :search
get 'tickets' => 'topics#tickets', as: :tickets
get 'ticket/:id/' => 'topics#ticket', as: :ticket
get 'locales/select' => 'locales#select', as: :select_locale
Expand Down

0 comments on commit 98fd9b7

Please sign in to comment.