https://online.euglena.jp/js/sys/search_suggest.js

1var ecblib = ecblib || {};
2ecblib.search_suggest = ecblib.search_suggest || {};
3
4(function () {
5    var _search_suggest = ecblib.search_suggest;
6
7    var searchSuggestFormSelector = ".js-suggest-search";
8    var searchSuggestAreaSelector = "#search_suggest_area_";
9    var searchSuggestPendingTime = 200;
10    var searchSuggestMinLength = 1;
11    var searchSuggestURL = '';
12    var searchSuggestAreaTmpl = '<div id="search_suggest_area_" class="block-search-suggest"></div>';
13    var searchSuggestTimer = null;
14    var searchSuggestCurrentForm = null;
15    /*  初期化処理 */
16    jQuery(document).ready(function () {
17        /*  サジェストAjaxのURL生成 */
18        searchSuggestURL = ecblib.sys.wwwroot + "/shop/search/searchsuggest.aspx";
19        /*  キーワードを入力した、または、キーワードにフォーカスした場合のイベント */
20        jQuery(searchSuggestFormSelector).on("keyup focus input", function (e) {
21            triggerSearchSuggest(e, jQuery(this));
22        });
23        jQuery(searchSuggestFormSelector).on("keydown", function (e) {
24            if (e.which == 40) {
25                jQuery(searchSuggestAreaSelector).find('a:first').focus();
26                e.preventDefault();
27                e.stopPropagation();
28            }
29        });
30        jQuery(document).on("keydown", searchSuggestAreaSelector, function (e) {
31            if (e.which == 38) {
32                var prevObj = jQuery(document.activeElement).parent().prev();
33                var prevObjParent = jQuery(document.activeElement).parent().parent().prev();
34                if (!prevObj[0] && !prevObjParent[0]) {
35                    jQuery(searchSuggestAreaSelector).find('a:last').focus();
36                } else if (prevObj[0]) {
37                    prevObj.find('a:last').focus();
38                } else if (prevObjParent[0]) {
39                    prevObjParent.children(':last').find('a:last').focus();
40                }
41                e.preventDefault();
42                e.stopPropagation();
43            }
44            if (e.which == 40) {
45                var nextObj = jQuery(document.activeElement).parent().next();
46                var nextObjParent = jQuery(document.activeElement).parent().parent().next();
47                if (!nextObj[0] && !nextObjParent[0]) {
48                    jQuery(searchSuggestAreaSelector).find('a:first').focus();
49                } else if (nextObj[0]) {
50                    nextObj.find('a:first').focus();
51                } else if (nextObjParent[0]) {
52                    nextObjParent.children(':first').find('a:first').focus();
53                }
54                e.preventDefault();
55                e.stopPropagation();
56            }
57            if (e.which == 13) {
58                return jQuery(document.activeElement).click();
59            }
60        });
61        /*  サジェストキーワードをクリックされた場合のイベント */
62        jQuery(document).on("click", ".js-search-suggest-keyword-entry", function () {
63            selectSearchSuggestKeyword(jQuery(this));
64            return false;
65        });
66        /*  サジェスト商品をクリックされた場合のイベント */
67        jQuery(document).on("click", ".js-search-suggest-goods", function () {
68            selectSearchSuggestGoods(jQuery(this));
69        });
70        /*  サジェストエリア外をクリックされた場合のイベント */
71        jQuery("body").on("click", function (e) {
72            hideSearchSuggest(e);
73        });
74    });
75    /*  サジェストキーワード選択時の処理 */
76    function selectSearchSuggestKeyword(entry) {
77        jQuery(searchSuggestCurrentForm).val(entry.text());
78        if (jQuery(searchSuggestCurrentForm).data("suggest-submit") == "on") {
79            /*  suggest-submitがonの時はformをsubmit */
80            jQuery(searchSuggestCurrentForm).closest("form").submit();
81        } else {
82            /*  suggest-submitがoffの時はサジェストエリアを閉じる */
83            removeSearchSuggest();
84        }
85    }

86    /*  サジェスト商品選択時の処理 */
87    function selectSearchSuggestGoods(entry) {
88        location.href = entry.find("a").attr("href");
89    }
90    /*  キーワード入力後サジェスト表示タイマー開始処理 */
91    function triggerSearchSuggest(e, inputForm) {
92        var inputKeyword = inputForm.val();
93        /*  エンターの場合は中断 */
94        if (e.keyCode == 13) {
95            return false;
96        }
97        /*  既に表示タイマーが開始されている場合は取り消し */
98        if (searchSuggestTimer) {
99            clearTimeout(searchSuggestTimer);
100            searchSuggestTimer = null;
101        }
102        /*  入力が空か最低入力文字数に満たない場合は中断 */
103        if (inputKeyword == '' || inputKeyword.length < searchSuggestMinLength) {
104            removeSearchSuggest();
105            return false;
106        }
107        /*  表示タイマーをセット */
108        searchSuggestTimer = setTimeout(function () {
109            searchSuggestTimer = null;
110            requestSearchSuggest(inputForm, inputKeyword);
111        }, searchSuggestPendingTime);
112    }
113    /*  サジェスト表示タイマーがタイムアウト後の処理 */
114    function requestSearchSuggest(inputForm, inputKeyword) {
115        jQuery.ajax({
116            url: searchSuggestURL,
117            type: "POST",
118            dataType: "html",
119            cache: false,
120            data: {
121                input_keyword: inputKeyword
122            },
123            success: function (responseHtml) {
124                /*  サジェストエリア消去 */
125                removeSearchSuggest();
126                /*  サジェストデータを受信したがキーワードがクリアされていた場合は中断 */
127                if (inputForm.val() == '') {
128                    return;
129                }
130                /*  サジェストデータが空（改行のみの場合を含む）の場合は中断 */
131                if (responseHtml.replace(/\s+$/, "") == '') {
132                    return;
133                }
134                /*  サジェストデータがセッション切れHTML等に置き換わっている場合は中断 */
135                if (responseHtml.indexOf("suggest_keyword_list") == -1 && responseHtml.indexOf("suggest_goods_list") == -1) {
136                    return;
137                }
138                /*  サジェストエリア表示 */
139                showSearchSuggest(inputForm, responseHtml);
140            }
141        });
142    }
143    /*  サジェストエリア表示処理 */
144    function showSearchSuggest(inputForm, responseHtml) {
145        /*  サジェストエリアのテンプレートを追加 */
146        jQuery("body").append(searchSuggestAreaTmpl);
147        /*  サジェストエリアのHTMLをセット */
148        var suggestArea = jQuery(searchSuggestAreaSelector);
149        suggestArea.html(responseHtml);
150        /*  表示位置の調整 */
151        var ctrl = inputForm;
152        var ctrlOffset = ctrl.offset();
153        var ctrlLeft = ctrlOffset.left;
154        var ctrlTop = ctrlOffset.top + jQuery(ctrl).outerHeight(false);
155        suggestArea.offset({
156            top: ctrlTop,
157            left: ctrlLeft
158        });
159        var paddingWidth = parseInt(suggestArea.css('margin-left')) + parseInt(suggestArea.css('margin-right')) + parseInt(suggestArea.css('padding-left')) + parseInt(suggestArea.css('padding-right'));
160        var width = jQuery(ctrl).outerWidth(true) - paddingWidth;
161        suggestArea.css("min-width", width);
162        /*  サジェストを表示したフォームを保持 */
163        searchSuggestCurrentForm = inputForm;
164        /*  サジェストエリア表示 */
165        suggestArea.show();
166    }
167    /*  サジェストエリア非表示判定と非表示処理呼び出し */
168    function hideSearchSuggest(e) {
169        var suggestArea = jQuery(searchSuggestAreaSelector);
170        if (suggestArea.size()) {
171            var x = e.clientX + jQuery(window).scrollLeft();
172            var y = e.clientY + jQuery(window).scrollTop();
173            var ctrlOffset = suggestArea.offset();
174            var startX = ctrlOffset.left;
175            var endX = startX + suggestArea.outerWidth(true);
176            var startY = ctrlOffset.top;
177            var endY = startY + suggestArea.outerHeight(true);
178            if (x < startX || x > endX || y < startY || y > endY) {
179                removeSearchSuggest();
180            }
181        }
182    }
183    /*  サジェストエリア非表示処理 */
184    function removeSearchSuggest() {
185        jQuery(searchSuggestAreaSelector).remove();
186        searchSuggestCurrentForm = null;
187    }
188}());