Update site search chinese input issue, add pagination, user feed back and performance
This commit is contained in:
rulingcom
spen
parent
47d9eeea6c
commit
d98faba129
|
|
@ -125,8 +125,8 @@
|
||||||
top: 14px;
|
top: 14px;
|
||||||
}
|
}
|
||||||
#orbit-bar #search .icon-search {
|
#orbit-bar #search .icon-search {
|
||||||
left: 13px;
|
left: 20px;
|
||||||
top: 15px;
|
top: 12px;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
#orbit-bar #search .search-clear {
|
#orbit-bar #search .search-clear {
|
||||||
|
|
@ -138,11 +138,114 @@
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Search Container*/
|
||||||
|
#search_container{
|
||||||
|
display: none;
|
||||||
|
top: 40px;
|
||||||
|
right: 20px;
|
||||||
|
width: 40%;
|
||||||
|
background: #FAFAFA;
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 0px 5px 20px #666;
|
||||||
|
color: #666;
|
||||||
|
font-family: "微軟正黑體", "Raleway";
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_head{
|
||||||
|
text-align: right;
|
||||||
|
padding: 5px 25px 5px 10px;
|
||||||
|
/*border-bottom: 1px solid #CCC;*/
|
||||||
|
color: #666;
|
||||||
|
/*background: #EEE;*/
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_loading{
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_footer{
|
||||||
|
min-height: 10px;
|
||||||
|
padding: 5px 25px 5px 10px;
|
||||||
|
border-top: 1px solid #DDD;
|
||||||
|
border-bottom: 1px solid #CCC;
|
||||||
|
color: #666;
|
||||||
|
background: #EEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_footer .pagination{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_footer .pagination ul li a{
|
||||||
|
padding: 4px 10px;
|
||||||
|
color: #0053CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_results{
|
||||||
|
max-height: 500px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
#search_results img{
|
||||||
|
margin: 20px auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#search_results::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background: #CCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_results::-webkit-scrollbar-track {
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_results::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search_results a:hover{
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seach_title{
|
||||||
|
padding: 5px 0;
|
||||||
|
color: #0053CF;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_result{
|
||||||
|
padding: 15px 15px;
|
||||||
|
/*border-bottom: 1px solid #DDD;
|
||||||
|
border-top: 1px solid #FFF;*/
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_result:hover{
|
||||||
|
background: #FFF;
|
||||||
|
box-shadow: 0px 0px 20px #DDD;
|
||||||
|
/*border-bottom: 1px solid #FFF;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_result a{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_result b{
|
||||||
|
font-weight: normal;
|
||||||
|
color: #B90000;
|
||||||
|
}
|
||||||
|
|
||||||
/*User info*/
|
/*User info*/
|
||||||
#orbit-bar #orbit-user .user-pic {
|
#orbit-bar #orbit-user .user-pic {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: -12px 10px -10px -15px;
|
margin: -13px 10px -10px -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Language & flag*/
|
/*Language & flag*/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
class SiteSearchController < ApplicationController
|
||||||
|
include ActionView::Helpers::TextHelper
|
||||||
|
def search
|
||||||
|
startTime = Time.now
|
||||||
|
if params[:keywords].present?
|
||||||
|
modules = [
|
||||||
|
{:key=>"announcement", :model=>"Bulletin", :fields=>["title","subtitle","text"], :url=>"/panel/announcement/front_end/bulletin/"}
|
||||||
|
]
|
||||||
|
|
||||||
|
key_string = params[:keywords]
|
||||||
|
key_string = key_string.strip.nil? ? key_string : key_string.strip
|
||||||
|
keywords = key_string.split(/\s+(?=(?:[^"]*"[^"]*")*[^"]*$)/)
|
||||||
|
regex = Regexp.union(keywords.map{|word| Regexp.new(".*"+word+".*", "i")})
|
||||||
|
|
||||||
|
result = []
|
||||||
|
|
||||||
|
# Search Pages
|
||||||
|
Item.where(:app_frontend_url=>"page_contexts", :is_published=>true).each do |page|
|
||||||
|
title = page.title
|
||||||
|
context = PageContext.where(:page_id=>page.id).first.context rescue nil
|
||||||
|
next if title.nil? and context.nil?
|
||||||
|
|
||||||
|
context = context.gsub(/<\/?[^>]*>/, "").gsub(/ /i,"") rescue ""
|
||||||
|
title_matches = title.match(regex)
|
||||||
|
context_matches = context.match(regex)
|
||||||
|
if title_matches or context_matches
|
||||||
|
tmp = {}
|
||||||
|
tmp[:id] = page.id
|
||||||
|
tmp[:module] = "page"
|
||||||
|
tmp[:url] = "/"+page.path
|
||||||
|
tmp[:title] = title
|
||||||
|
tmp[:content] = context
|
||||||
|
result.push(tmp)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
# Search Modules
|
||||||
|
modules.each do |mod|
|
||||||
|
query = mod[:fields].map{|f| {f.to_sym => regex} }
|
||||||
|
res = Kernel.const_get(mod[:model]).any_of(query)
|
||||||
|
res.each do |r|
|
||||||
|
tmp = {}
|
||||||
|
tmp[:id] = r.id
|
||||||
|
tmp[:module] = mod[:key]
|
||||||
|
tmp[:url] = mod[:url]+r.id.to_s
|
||||||
|
tmp[:content] = ""
|
||||||
|
tmp[:matches] = 0
|
||||||
|
mod[:fields].each do |f|
|
||||||
|
value = ActionView::Base.full_sanitizer.sanitize(eval("r.#{f}")) rescue ""
|
||||||
|
value = value.nil? ? "" : value
|
||||||
|
|
||||||
|
if f=="title" or f=="name"
|
||||||
|
tmp[:title] = value
|
||||||
|
else
|
||||||
|
tmp[:content] << value
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
result.push(tmp)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
result.each do |res|
|
||||||
|
res[:matches] = 0
|
||||||
|
|
||||||
|
res[:matches] += res[:title].match(/(#{key_string})/i) ? 500 : 0 rescue 0
|
||||||
|
res[:matches] += res[:content].match(/(#{key_string})/i) ? 300 : 0 rescue 0
|
||||||
|
|
||||||
|
keywords.each do |k|
|
||||||
|
res[:matches] += (res[:title].scan(/(#{k})/i).size)*100 + res[:content].scan(/(#{k})/i).size
|
||||||
|
res[:title].gsub!(/(#{k})/i, '<b>\1</b>') rescue ""
|
||||||
|
res[:content].gsub!(/(#{k})/i, '<b>\1</b>') rescue ""
|
||||||
|
end
|
||||||
|
|
||||||
|
if res[:matches]==0
|
||||||
|
result = result - [res]
|
||||||
|
next
|
||||||
|
end
|
||||||
|
|
||||||
|
res[:content] = truncate(res[:content], length: 120)
|
||||||
|
end
|
||||||
|
|
||||||
|
result = result.sort_by { |k| k[:matches] }.reverse rescue []
|
||||||
|
|
||||||
|
render :json => { "results" => result, "time"=> ((Time.now-startTime)*1000).to_i , "keywords"=>keywords}
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<div id="search_container">
|
||||||
|
<div id='search_head'>
|
||||||
|
<button type="button" id="search_close" class="close pull-left">×</button>
|
||||||
|
<div id='search_time'></div>
|
||||||
|
</div>
|
||||||
|
<div id='search_results'>
|
||||||
|
</div>
|
||||||
|
<div id='search_footer'>
|
||||||
|
<div class="pagination pagination-centered"><div class="pagination">
|
||||||
|
<ul id="search_pagination">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var interval = 0;
|
||||||
|
var keyword;
|
||||||
|
var searchLock=false;
|
||||||
|
var results;
|
||||||
|
|
||||||
|
var Search = function(){
|
||||||
|
var s = this;
|
||||||
|
this.init = function(){
|
||||||
|
$("#q").bind("input", function() {s.queueSearch();});
|
||||||
|
|
||||||
|
$("#search_form").submit(function(){s.queueSearch(); return false; });
|
||||||
|
$("#search_close").click(function(){$("#search_container").fadeOut(300);});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.queueSearch = function(){
|
||||||
|
if($("#q").val() != keyword && $("#q").val()!=""){
|
||||||
|
keyword = $("#q").val();
|
||||||
|
interval=500;
|
||||||
|
if(!searchLock) s.processSearch();
|
||||||
|
}else if($("#q").val()==""){
|
||||||
|
keyword = "";
|
||||||
|
$("#search_container").slideUp(300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.processSearch = function(){
|
||||||
|
keyword_tmp = keyword;
|
||||||
|
searchLock = true;
|
||||||
|
if(interval==0 && keyword!=""){
|
||||||
|
$("#search_time").html("");
|
||||||
|
$("#search_results").scrollTop(0);
|
||||||
|
$("#search_results").html('<img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">');
|
||||||
|
$("#search_pagination").html("");
|
||||||
|
$("#search_container").slideDown(300);
|
||||||
|
|
||||||
|
$.getJSON("/site_search", {"keywords" : keyword}, function(data){
|
||||||
|
if(keyword_tmp != keyword) {
|
||||||
|
searchLock = false;
|
||||||
|
s.processSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
results = data.results;
|
||||||
|
|
||||||
|
$("#search_time").html("Found "+results.length+" Results, Search Time: "+data.time+"ms");
|
||||||
|
|
||||||
|
renderResults(1);
|
||||||
|
searchLock = false;
|
||||||
|
});
|
||||||
|
}else if(interval>0){
|
||||||
|
interval -= 100;
|
||||||
|
setTimeout(s.processSearch,100);
|
||||||
|
}else if(keyword==""){
|
||||||
|
searchLock = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
s.init();
|
||||||
|
}();
|
||||||
|
|
||||||
|
function renderResults(page){
|
||||||
|
var rangeStart = ((page-1)==0) ? 0 : ((page-1)*5)-1;
|
||||||
|
var tmpResults = results.slice(rangeStart, rangeStart+5);
|
||||||
|
|
||||||
|
$("#search_results").scrollTop(0);
|
||||||
|
$("#search_results").html("");
|
||||||
|
$.each(tmpResults,function(key,res){
|
||||||
|
search_result = "<div class='search_result'>"+
|
||||||
|
"<a href='"+res.url+"' target='_blank'>"+
|
||||||
|
"<div class='seach_title'>"+res.title+"</div>"+
|
||||||
|
"</a>"+
|
||||||
|
"<span>"+res.content+"</span>"+
|
||||||
|
"</div>";
|
||||||
|
$("#search_results").append(search_result);
|
||||||
|
});
|
||||||
|
renderPagination(page);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPagination(page){
|
||||||
|
var totalPages = Math.round(results.length/5);
|
||||||
|
var startPage = ((page-5)<=0) ? 1 : page-5;
|
||||||
|
var ednPage = ( (startPage+10)>totalPages ) ? totalPages : (startPage+10);
|
||||||
|
|
||||||
|
if( (ednPage-startPage)<10 && totalPages>10 ){
|
||||||
|
startPage = ednPage-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#search_pagination").html("");
|
||||||
|
|
||||||
|
for(var i=startPage;i<=ednPage;i++){
|
||||||
|
var active = (i==page) ? "active" : "";
|
||||||
|
$("#search_pagination").append('<li class="page '+active+'"><a href="#" onclick="renderResults('+i+');">'+i+'</a></li>');
|
||||||
|
}
|
||||||
|
|
||||||
|
if(page<totalPages){
|
||||||
|
$("#search_pagination").append('<li class="next"><a href="#" onclick="renderResults('+(page+1)+');"><span>Next</span></a></li>');
|
||||||
|
$("#search_pagination").append('<li class="last"><a href="#" onclick="renderResults('+totalPages+');"><span>Last</span></a></li>');
|
||||||
|
}
|
||||||
|
if(page!=1){
|
||||||
|
$("#search_pagination").prepend('<li class="first"><a href="#" onclick="renderResults('+1+');"><span>First</span></a></li>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue