https://www.jaldutyfree.com/js/search_suggest.js

1var searchSuggestFormSelector = ".withSuggestSearch_";
2var searchSuggestAreaSelector = "#search_suggest_area_";
3var searchSuggestPendingTime  = 200;
4var searchSuggestMinLength    = 1;
5var searchSuggestURL          = '';
6var searchSuggestAreaTmpl     = '<div id="search_suggest_area_"></div>';
7var searchSuggestTimer        = null;
8var searchSuggestCurrentForm  = null;
9
10// 初期化処理
11jQuery(document).ready(function() {
12	
13	// サジェストAjaxのURL生成
14	searchSuggestURL = EC_WWW_ROOT + "/shop/search/searchsuggest.aspx";
15	
16	// キーワードを入力した、または、キーワードにフォーカスした場合のイベント
17	jQuery(searchSuggestFormSelector).on(
18		"keyup focus input" , function(e) { triggerSearchSuggest( e, jQuery(this) ); }
19	);
20	
21	jQuery(searchSuggestFormSelector).on(
22		"keydown" , function(e) {
23						if( e.which == 40 ) {
24							jQuery(searchSuggestAreaSelector).find('a:first').focus();
25							e.preventDefault();
26							e.stopPropagation();
27						}
28	});
29
30	jQuery(document).on(
31		"keydown", searchSuggestAreaSelector,  function(e) {
32						if( e.which == 38 ) {
33							var prevObj          = jQuery(document.activeElement).parent().prev();
34							var prevObjParent    = jQuery(document.activeElement).parent().parent().prev();
35
36							if(!prevObj[0] && !prevObjParent[0]) {
37								jQuery(searchSuggestAreaSelector).find('a:last').focus();
38							} else if(prevObj[0]) {
39								prevObj.find('a:last').focus();
40							} else if(prevObjParent[0]) {
41								prevObjParent.children(':last').find('a:last').focus();
42							}
43							e.preventDefault();
44							e.stopPropagation();
45
46						}
47						if( e.which == 40 ) {	
48							var nextObj = jQuery(document.activeElement).parent().next();
49							var nextObjParent    = jQuery(document.activeElement).parent().parent().next();
50
51							if(!nextObj[0] && !nextObjParent[0]) {
52								jQuery(searchSuggestAreaSelector).find('a:first').focus();
53							} else if(nextObj[0]) {
54								nextObj.find('a:first').focus();
55							} else if(nextObjParent[0]) {
56								nextObjParent.children(':first').find('a:first').focus();
57							}
58							e.preventDefault();
59							e.stopPropagation();
60						}
61						if (e.which == 13) {
62							return jQuery(document.activeElement).click();
63						}
64	});
65
66	jQuery(document).on(
67		"focus", searchSuggestAreaSelector,  function(e) {
68									jQuery(searchSuggestAreaSelector).find('#suggest_keyword_list_').children('div.suggest_keyword_').css({'background-color':''});
69									jQuery(searchSuggestAreaSelector).find('#suggest_goods_list_').children().css({'background-color':''});
70									jQuery(e.target).parent().css({'background-color':'#dedede'});
71	});
72
73	// サジェストキーワードをクリックされた場合のイベント
74	jQuery(document).on(
75		"click", ".suggest_keyword_entry_", function() { selectSearchSuggestKeyword(jQuery(this)); return false; }
76	);
77	
78	// サジェスト商品をクリックされた場合のイベント
79	jQuery(document).on(
80		"click", ".suggest_goods_", function() { selectSearchSuggestGoods(jQuery(this)); }
81	);
82	
83	// サジェストエリア外をクリックされた場合のイベント
84    jQuery("body").on(
85    	"click", function(e){ hideSearchSuggest(e); }
86    );
87	
88});
89
90// サジェストキーワード選択時の処理
91function selectSearchSuggestKeyword(entry) {
92	jQuery(searchSuggestCurrentForm).val(entry.text());
93	if (jQuery(searchSuggestCurrentForm).data("suggest-submit") == "on") {
94		// suggest-submitがonの時はformをsubmit
95		jQuery(searchSuggestCurrentForm).closest("form").submit();
96	}else{
97		// suggest-submitがoffの時はサジェストエリアを閉じる
98		removeSearchSuggest();
99	}
100}
101
102// サジェスト商品選択時の処理
103function selectSearchSuggestGoods(entry) {
104	location.href = entry.find("a").attr("href");
105}
106
107// キーワード入力後サジェスト表示タイマー開始処理
108function triggerSearchSuggest(e, inputForm) {
109	
110	var inputKeyword = inputForm.val();
111	
112	// エンターの場合は中断
113    if (e.keyCode == 13) {
114        return false;
115    }
116	
117	// 既に表示タイマーが開始されている場合は取り消し
118	if (searchSuggestTimer) {
119		clearTimeout(searchSuggestTimer);
120		searchSuggestTimer = null;
121	}
122	
123	// 入力が空か最低入力文字数に満たない場合は中断
124	if (inputKeyword == '' || inputKeyword.length < searchSuggestMinLength){
125		removeSearchSuggest();
126		return false;
127	}
128	
129	// 表示タイマーをセット
130    searchSuggestTimer = setTimeout(function() {
131    		    searchSuggestTimer = null;
132                requestSearchSuggest(inputForm, inputKeyword);
133	          }, searchSuggestPendingTime);
134	
135}
136

137// サジェスト表示タイマーがタイムアウト後の処理
138function requestSearchSuggest(inputForm, inputKeyword) {
139	
140    jQuery.ajax({
141        url: searchSuggestURL,
142        type: "POST",
143        dataType: "html",
144        cache: false,
145        data: {input_keyword : inputKeyword},
146        success: function(responseHtml) {
147			// サジェストエリア消去
148			removeSearchSuggest();
149			
150			// サジェストデータを受信したがキーワードがクリアされていた場合は中断
151			if (inputForm.val() == '') { return; }
152			
153			// サジェストデータが空（改行のみの場合を含む）の場合は中断
154			if (responseHtml.replace(/\s+$/, "") == '') { return; }
155			
156			// サジェストデータがセッション切れHTML等に置き換わっている場合は中断
157			if (responseHtml.indexOf("suggest_keyword_list") == -1 && responseHtml.indexOf("suggest_goods_list") == -1) { return; }
158			
159			// サジェストエリア表示
160            showSearchSuggest(inputForm, responseHtml);
161        }
162    });
163	
164}
165
166// サジェストエリア表示処理
167function showSearchSuggest(inputForm, responseHtml) {
168
169	// サジェストエリアのテンプレートを追加
170	jQuery("body").append(searchSuggestAreaTmpl);
171	
172	// サジェストエリアのHTMLをセット
173	var suggestArea = jQuery(searchSuggestAreaSelector);
174    suggestArea.html(responseHtml);
175
176	// 表示位置の調整
177	var ctrl = inputForm;
178	var ctrlOffset = ctrl.offset();
179	var ctrlLeft = ctrlOffset.left;
180	var ctrlTop = ctrlOffset.top + jQuery(ctrl).outerHeight(false);
181	suggestArea.offset({ top : ctrlTop, left : ctrlLeft });
182
183	var paddingWidth = parseInt(suggestArea.css('margin-left')) 
184	                 + parseInt(suggestArea.css('margin-right'))
185	                 + parseInt(suggestArea.css('padding-left'))
186	                 + parseInt(suggestArea.css('padding-right'));
187	var width = jQuery(ctrl).outerWidth(true) - paddingWidth;
188	suggestArea.css("min-width",width);
189	
190	// サジェストを表示したフォームを保持
191	searchSuggestCurrentForm = inputForm;
192	
193	// サジェストエリア表示
194    suggestArea.show();
195	
196}
197
198// サジェストエリア非表示判定と非表示処理呼び出し
199function hideSearchSuggest(e) {
200	
201	var suggestArea = jQuery(searchSuggestAreaSelector);
202	if (suggestArea.size()) {
203		 var x = e.clientX + jQuery(window).scrollLeft();
204         var y = e.clientY + jQuery(window).scrollTop();
205         var ctrlOffset = suggestArea.offset();
206         var startX = ctrlOffset.left;
207         var endX = startX + suggestArea.outerWidth(true);
208         var startY = ctrlOffset.top;
209         var endY = startY + suggestArea.outerHeight(true);
210         
211         if (x < startX || x > endX || y < startY || y > endY) {
212         	removeSearchSuggest();
213         }
214	}
215}
216
217
218// サジェストエリア非表示処理
219function removeSearchSuggest() {
220	jQuery(searchSuggestAreaSelector).remove();
221	searchSuggestCurrentForm = null;
222}
223