0ct0pu5/fess
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add suggest window to search form.

Browse source
This commit is contained in:
yfujita 2014-01-19 18:29:38 +09:00
parent 7942542c61
commit 3c81021404
3 changed files with 404 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -15,3 +15,4 @@
.classpath
*.iml
.idea
.DS_Store

28
src/main/webapp/WEB-INF/view/index.jsp
View file

@ -178,5 +178,33 @@
src="${f:url('/js/jquery-1.8.3.min.js')}"></script>
<script type="text/javascript" src="${f:url('/js/index.js')}"></script>
<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
<script type="text/javascript" src="js/suggestor.js"></script>
<script>
$(function(){
$("#contentQuery").suggestor( {
ajaxinfo: {
url: "/fess/json",
fn: "content",
num: 10
},
boxCssInfo: {
border: "1px solid rgba(82, 168, 236, 0.5)",
"-webkit-box-shadow": "0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)",
"-moz-box-shadow": "0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)",
"box-shadow": "0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)",
"background-color": "#fff"
},
listSelectedCssInfo: {
"background-color": "rgba(82, 168, 236, 0.1)"
},
listDeselectedCssInfo: {
"background-color": "#ffffff"
},
minturm: 1,
adjustWidthVal: 11,
searchForm: $('#searchForm')
});
});
</script>
</body>
</html>

375
src/main/webapp/js/suggestor.js Normal file
View file

@ -0,0 +1,375 @@
;(function($){
$.fn.suggestor = function(setting) {
var $boxElement;
var $textArea;
var inputText = "";
var isFocusList = false;
var listNum = 0;
var listSelNum = 0;
var isMouseHover = false;
var started = false;
var interval = 5;
var settingMinTerm = 1;
var settingAjaxInfo;
var settingAdjustWidthVal;
var $settingSearchForm;
var listSelectedCssInfo;
var listDeselectedCssInfo;
var boxCssInfo;
var suggestingSts = false;
var suggestor = {
init: function($element, setting) {
suggestingSts = false;
$boxElement = $("<div/>");
$boxElement.addClass("suggestorBox");
//style sheet
$boxElement.css("display","none");
$boxElement.css("position","absolute");
$boxElement.css("text-align","left");
$boxElement.css("font-size",$element.css("font-size"));
if(typeof setting.boxCssInfo === "undefined") {
$boxElement.css("border","1px solid #cccccc");
$boxElement.css("-webkit-box-shadow","0 3px 2px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(236, 236, 236, 0.6)");
$boxElement.css("-moz-box-shadow","0 3px 2px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(236, 236, 236, 0.6)");
$boxElement.css("box-shadow","0 3px 2px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(236, 236, 236, 0.6)");
$boxElement.css("background-color","#fff");
} else {
$boxElement.css(setting.boxCssInfo);
}
$textArea = $element;
$textArea.attr("autocomplete","off");
isFocusList = false;
inputText = $textArea.val();
//設定
settingAjaxInfo = setting.ajaxinfo;
settingMinTerm = setting.minturm;
$settingSearchForm = setting.searchForm;
listSelectedCssInfo = setting.listSelectedCssInfo;
listDeselectedCssInfo = setting.listDeselectedCssInfo;
settingAdjustWidthVal = setting.adjustWidthVal;
boxCssInfo = setting.boxCssInfo;
$boxElement.hover(function() {
isMouseHover = true;
}, function() {
isMouseHover = false;
});
//ポジション設定
this.resize();
var suggestor = this;
$(window).resize(function() {
suggestor.resize();
});
$("body").append($boxElement);
},
suggest: function() {
suggestingSts = true;
//ポジション設定
this.resize();
var suggestor = this;
inputText = $textArea.val();
listNum = 0;
listSelNum = 0;
if(inputText.length < settingMinTerm) {
$boxElement.css("display","none");
suggestingSts = false;
return;
}
$.ajax({
url: settingAjaxInfo.url,
type:"get",
dataType: "jsonp",
cache : false,
data:{ query: $textArea.val(),
type: "suggest",
fn: settingAjaxInfo.fn,
num: settingAjaxInfo.num * 2
}
}).done(function(obj) { suggestor.createAutoCompleteList(obj); }).fail(function(a,obj,b) { suggestingSts=false; return; });
},
createAutoCompleteList: function(obj) {
var response = obj.response;
var suggestor = this;
var addCount = 0;
listNum = 0;
if(typeof response.result !== "undefined") {
var reslist = new Array();
for(var i=0;i<response.result.length;i++) {
var tmpList = response.result[i].result;
for(var j=0;j<tmpList.length;j++) {
reslist.push(tmpList[j]);
}
}
var $olEle = $("<ol/>");
$olEle.css("list-style","none");
$olEle.css("padding","0");
$olEle.css("margin","2px");
for(var i=0;i<reslist.length && listNum < settingAjaxInfo.num;i++) {
var str = reslist[i];
var chkCorrectWord = true;
/*
//suggestionの子要素かチェック
var parentEle = $(reslist[i]).closest("arr");
if(typeof parentEle === "undefined") {
continue;
} else if($(parentEle).attr("name") != "suggestion") {
continue;
}
*/
//すでに同じ文字が表示されてないかチェック。ゴミ抜き
if(str === $textArea.val()) {
chkCorrectWord = false;
//} else if(0 != str.indexOf($textArea.val())) {
// chkCorrectWord = false;
} else {
var $tmpli = $($olEle.children("li"));
for(var j=0;j<$tmpli.size();j++) {
if(str == $($tmpli.get(j)).html()) {
chkCorrectWord = false;
}
}
}
if(chkCorrectWord) {
var $liEle = $("<li/>");
$liEle.html(str);
$liEle.click(function() {
var str = $(this).html();
suggestor.fixList();
$textArea.val(str);
//BEGIN: N2 SEARCH 検索開始
if(typeof $settingSearchForm !== "undefined") {
$settingSearchForm.submit();
//$settingSearchForm.trigger("submit");
}
});
$liEle.hover(function() {
listSelNum = $(this).closest("ol").children("li").index(this) + 1;
$(this).closest("ol").children("li").each(function(i){
if(i == (listSelNum-1)) {
if(typeof listSelectedCssInfo === 'undefined') {
$(this).css("background-color", "#e5e5e5");
} else {
$(this).css(listSelectedCssInfo);
}
} else {
if(typeof listDeselectedCssInfo !== 'undefined') {
$(this).css(listDeselectedCssInfo);
} else {
if(typeof boxCssInfo === 'undefined' || typeof boxCssInfo["background-color"] === 'undefined') {
$(this).css("background-color", "#ffffff");
} else {
$(this).css("background-color", boxCssInfo["background-color"]);
}
}
}
});
}, function() {
if( listSelNum == ($(this).closest("ol").children("li").index(this) + 1) ) {
if(typeof listDeselectedCssInfo !== 'undefined') {
$(this).css(listDeselectedCssInfo);
} else {
if(typeof boxCssInfo === 'undefined' || typeof boxCssInfo["background-color"] === 'undefined') {
$(this).css("background-color", "#ffffff");
} else {
$(this).css("background-color", boxCssInfo["background-color"]);
}
}
listSelNum = 0
}
});
$liEle.css("padding","2px");
$olEle.append($liEle);
listNum++;
}
}
if(listNum>0 && $textArea.val().length >= settingMinTerm) {
$boxElement.html("");
$boxElement.append($olEle);
$boxElement.css("display","block");
} else {
$boxElement.css("display","none");
}
} else {
$boxElement.css("display","none");
}
//ポジション設定
this.resize();
suggestingSts = false;
},
selectlist: function(direction) {
if($boxElement.css("display") == "none") {
return;
}
if(direction == "down") {
listSelNum++;
} else if(direction == "up") {
listSelNum--;
} else {
return;
}
isFocusList = true;
if(listSelNum < 0){
listSelNum = listNum;
} else if(listSelNum > listNum) {
listSelNum = 0;
}
var a = $boxElement.children("ol").children("li");
$boxElement.children("ol").children("li").each(function(i){
if(i == (listSelNum-1)) {
if(typeof listSelectedCssInfo === 'undefined') {
$(this).css("background-color", "#e5e5e5");
} else {
$(this).css(listSelectedCssInfo);
}
$textArea.val($(this).html());
} else {
if(typeof listDeselectedCssInfo !== 'undefined') {
$(this).css(listDeselectedCssInfo);
} else {
if(typeof boxCssInfo === 'undefined' || typeof boxCssInfo["background-color"] === 'undefined') {
$(this).css("background-color", "#ffffff");
} else {
$(this).css("background-color", boxCssInfo["background-color"]);
}
}
}
});
if(listSelNum == 0) {
$textArea.val(inputText);
}
},
fixList: function() {
if(listSelNum > 0) {
$textArea.val($($boxElement.children("ol").children("li").get(listSelNum-1)).html());
}
inputText = $textArea.val();
isFocusList = false;
$boxElement.css("display","none");
listNum = 0;
},
resize: function() {
$boxElement.css("top",$textArea.offset().top + $textArea.height() + 6);
$boxElement.css("left",$textArea.offset().left);
$boxElement.css("height","auto");
$boxElement.css("width","auto");
if($boxElement.width() < $textArea.width() + settingAdjustWidthVal) {
$boxElement.width($textArea.width() + settingAdjustWidthVal);
}
}
}
suggestor.init($(this), setting);
$(this).keydown( function(e){
if( ((e.keyCode >= 48) && (e.keyCode <= 90))
|| ((e.keyCode >= 96) && (e.keyCode <= 105))
|| ((e.keyCode >= 186) && (e.keyCode <= 226))
|| e.keyCode == 8
|| e.keyCode == 32
|| e.keyCode == 46
) {
started = true;
isFocusList = false;
} else if(e.keyCode == 38) {
if($boxElement.css("display") != "none") {
e.preventDefault();
}
suggestor.selectlist("up");
} else if(e.keyCode == 40) {
if($boxElement.css("display") == "none") {
suggestor.suggest();
} else {
suggestor.selectlist("down");
}
} else if(e.keyCode == 13) {
if(isFocusList) {
suggestor.fixList();
}
}
});
$(this).keyup( function(e){
if( ((e.keyCode >= 48) && (e.keyCode <= 90))
|| ((e.keyCode >= 96) && (e.keyCode <= 105))
|| ((e.keyCode >= 186) && (e.keyCode <= 226))
|| e.keyCode == 8
|| e.keyCode == 32
|| e.keyCode == 46
) {
started = true;
isFocusList = false;
} else if(e.keyCode == 38) {
/* if($boxElement.css("display") != "none") {
var strTmp = $textArea.val();
$textArea.val("");
$textArea.focus();
$textArea.val(strTmp);
} */
}
});
$(this).blur(function(){
if(!isMouseHover) {
suggestor.fixList();
}
});
//テキストエリア監視
setInterval( function() {
if(interval < 5) {
interval = interval + 1;
} else {
if($textArea.val() != inputText) {
if(!isFocusList && started && !suggestingSts) {
//リスト選択中でなければ更新
suggestor.suggest();
interval = 0;
}
}
}
}, 100);
}
})(jQuery);