Update site search chinese input issue, add pagination, user feed back and performance
This commit is contained in:
rulingcom
parent
1bf4d55992
commit
7022adc11f
|
|
@ -169,11 +169,21 @@
|
|||
}
|
||||
|
||||
#search_footer{
|
||||
height: 10px;
|
||||
min-height: 10px;
|
||||
padding: 5px 25px 5px 10px;
|
||||
border-top: 1px solid #DDD;
|
||||
border-bottom: 1px solid #CCC;
|
||||
color: #666;
|
||||
/*background: #DDD;*/
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
#search_footer .pagination{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#search_footer .pagination ul li a{
|
||||
padding: 4px 10px;
|
||||
color: #0053CF;
|
||||
}
|
||||
|
||||
#search_results{
|
||||
|
|
@ -181,7 +191,10 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#search_results img{
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
}
|
||||
#search_results::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #CCC;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ class SiteSearchController < ApplicationController
|
|||
]
|
||||
|
||||
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")})
|
||||
|
||||
|
|
@ -45,7 +46,8 @@ class SiteSearchController < ApplicationController
|
|||
tmp[:content] = ""
|
||||
tmp[:matches] = 0
|
||||
mod[:fields].each do |f|
|
||||
value = eval("r.#{f}").gsub(/<\/?[^>]*>/, "").gsub(/ /i,"") rescue ""
|
||||
value = ActionView::Base.full_sanitizer.sanitize(eval("r.#{f}")) rescue ""
|
||||
value = value.nil? ? "" : value
|
||||
|
||||
if f=="title" or f=="name"
|
||||
tmp[:title] = value
|
||||
|
|
@ -62,11 +64,11 @@ class SiteSearchController < ApplicationController
|
|||
result.each do |res|
|
||||
res[:matches] = 0
|
||||
|
||||
res[:matches] += res[:title].match(/(#{key_string})/i) ? 100 : 0 rescue 0
|
||||
res[:matches] += res[:content].match(/(#{key_string})/i) ? 100 : 0 rescue 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 + res[:content].scan(/(#{k})/i).size
|
||||
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
|
||||
|
|
@ -76,7 +78,7 @@ class SiteSearchController < ApplicationController
|
|||
next
|
||||
end
|
||||
|
||||
res[:content] = truncate(res[:content], length: 150)
|
||||
res[:content] = truncate(res[:content], length: 120)
|
||||
end
|
||||
|
||||
result = result.sort_by { |k| k[:matches] }.reverse rescue []
|
||||
|
|
|
|||
|
|
@ -3,18 +3,28 @@
|
|||
<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>
|
||||
<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;
|
||||
var interval = 0;
|
||||
var keyword;
|
||||
var processLock=false;
|
||||
this.init = function(){
|
||||
$("#q").keyup(function(){s.queueSearch();});
|
||||
$("#q").bind("input", function() {s.queueSearch();});
|
||||
|
||||
$("#search_form").submit(function(){s.queueSearch(); return false; });
|
||||
$("#search_close").click(function(){$("#search_container").fadeOut(300);});
|
||||
}
|
||||
|
|
@ -23,44 +33,88 @@ var Search = function(){
|
|||
if($("#q").val() != keyword && $("#q").val()!=""){
|
||||
keyword = $("#q").val();
|
||||
interval=500;
|
||||
if(!processLock) s.processSearch();
|
||||
if(!searchLock) s.processSearch();
|
||||
}else if($("#q").val()==""){
|
||||
keyword = ""
|
||||
$("#search_container").fadeOut(300);
|
||||
keyword = "";
|
||||
$("#search_container").slideUp(300);
|
||||
}
|
||||
}
|
||||
this.processSearch = function(){
|
||||
keyword_tmp = keyword;
|
||||
processLock = true;
|
||||
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) {
|
||||
processLock = false;
|
||||
s.processSearch();
|
||||
return;
|
||||
}
|
||||
$("#search_results").scrollTop(0);
|
||||
$("#search_results").html("");
|
||||
$("#search_time").html("Found "+data.results.length+" Results, Search Time: "+data.time+"ms");
|
||||
$.each(data.results,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);
|
||||
});
|
||||
$("#search_container").fadeIn(300);
|
||||
processLock = false;
|
||||
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