https://albion.co.jp/js/sys/search_suggest.js

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

107/*  サジェスト表示タイマーがタイムアウト後の処理 */
108function requestSearchSuggest(inputForm, inputKeyword) {
109    jQuery.ajax({
110        url: searchSuggestURL,
111        type: "POST",
112        dataType: "html",
113        cache: false,
114        data: {
115            input_keyword: inputKeyword
116        },
117        success: function(responseHtml) { 
118            /*  サジェストエリア消去 */
119            removeSearchSuggest(); 
120            /*  サジェストデータを受信したがキーワードがクリアされていた場合は中断 */
121            if (inputForm.val() == '') {
122                return;
123            } 
124            /*  サジェストデータが空（改行のみの場合を含む）の場合は中断 */
125            if (responseHtml.replace(/\s+$/, "") == '') {
126                return;
127            } 
128            /*  サジェストデータがセッション切れHTML等に置き換わっている場合は中断 */
129            if (responseHtml.indexOf("suggest_keyword_list") == -1 && responseHtml.indexOf("suggest_goods_list") == -1) {
130                return;
131            } 
132            /*  サジェストエリア表示 */
133            showSearchSuggest(inputForm, responseHtml);
134        }
135    });
136} 
137/*  サジェストエリア表示処理 */
138function showSearchSuggest(inputForm, responseHtml) { 
139    /*  サジェストエリアのテンプレートを追加 */
140    jQuery("body").append(searchSuggestAreaTmpl); 
141    /*  サジェストエリアのHTMLをセット */
142    var suggestArea = jQuery(searchSuggestAreaSelector);
143    suggestArea.html(responseHtml); 
144    /*  表示位置の調整 */
145    var ctrl = inputForm;
146    var ctrlOffset = ctrl.offset();
147    var ctrlLeft = ctrlOffset.left;
148    var ctrlTop = ctrlOffset.top + jQuery(ctrl).outerHeight(false);
149    suggestArea.offset({
150        top: ctrlTop,
151        left: ctrlLeft
152    });
153    var paddingWidth = parseInt(suggestArea.css('margin-left')) + parseInt(suggestArea.css('margin-right')) + parseInt(suggestArea.css('padding-left')) + parseInt(suggestArea.css('padding-right'));
154    var width = jQuery(ctrl).outerWidth(true) - paddingWidth;
155    suggestArea.css("min-width", width); 
156    /*  サジェストを表示したフォームを保持 */
157    searchSuggestCurrentForm = inputForm; 
158    /*  サジェストエリア表示 */
159    suggestArea.show();
160} 
161/*  サジェストエリア非表示判定と非表示処理呼び出し */
162function hideSearchSuggest(e) {
163    var suggestArea = jQuery(searchSuggestAreaSelector);
164    if (suggestArea.size()) {
165        var x = e.clientX + jQuery(window).scrollLeft();
166        var y = e.clientY + jQuery(window).scrollTop();
167        var ctrlOffset = suggestArea.offset();
168        var startX = ctrlOffset.left;
169        var endX = startX + suggestArea.outerWidth(true);
170        var startY = ctrlOffset.top;
171        var endY = startY + suggestArea.outerHeight(true);
172        if (x < startX || x > endX || y < startY || y > endY) {
173            removeSearchSuggest();
174        }
175    }
176} 
177/*  サジェストエリア非表示処理 */
178function removeSearchSuggest() {
179    jQuery(searchSuggestAreaSelector).remove();
180    searchSuggestCurrentForm = null;
181}