https://www.ebarafoods.com/recipe/js/recipe-suggest.js

1//サジェスト機能
2$(document).ready(function(){
3	var suggestStr = "";
4	var suggestBox = $();
5	var drawerSuggest = $('.menu-second.drawer-dropdown-menu').eq(1);
6	var suggestType = 0;
7	var suggestLists = $();
8	var suggestNumber = -1;
9	var suggestHover = false;
10	
11	var suggestInit = function() {
12		if (suggestBox.length > 0) { suggestBox.hide(); }
13		suggestLists.removeClass('hover');
14		suggestLists = $();
15		suggestNumber = -1;
16		suggestHover = false;
17	};
18	
19	var suggestListAddEvent = function(obj) {
20		obj.hover(
21			function(){
22				suggestLists.removeClass('hover');
23				$(this).addClass('hover');
24				suggestHover = true;
25				suggestNumber = suggestLists.index(this);
26			},
27			function(){
28				$(this).removeClass('hover');
29				suggestHover = false;
30				suggestNumber = -1;
31			}
32		);
33	};
34	suggestListAddEvent($('.box-suggest-list li'));
35	
36	var checkSuggestAlive = function() {
37		if (suggestType === 1) {
38			return true;
39		} else if (suggestType === 2 && drawerSuggest.css('display')==="block") {
40			return true;
41		} else {
42			return false;
43		}
44	};
45	
46	var selectSuggest = function(d) {
47		if (suggestHover) { return; }
48		if (suggestNumber >= 0) {
49			suggestLists.eq(suggestNumber).removeClass('hover');
50		}
51		suggestNumber += d;
52		if (suggestNumber<0) {
53			suggestNumber = suggestLists.length -1;
54		} else if (suggestNumber>=suggestLists.length) {
55			suggestNumber = 0;
56		}
57		suggestLists.eq(suggestNumber).addClass('hover');
58	};
59	
60	document.onkeydown = function(e) {
61		if (suggestLists.length>0 && checkSuggestAlive) {
62			if (e.which === 13 || e.keyCode === 13) {
63				if (suggestNumber>0) {
64					e.preventDefault();
65					suggestLists.eq(suggestNumber).click();
66				}
67			} else if (e.which === 38 || e.keyCode === 38) {
68				e.preventDefault();
69				selectSuggest(-1);
70			} else if (e.which === 40 || e.keyCode === 40) {
71				e.preventDefault();
72				selectSuggest(1);
73			}
74		}
75	};
76	
77	$("form div.box-suggest-search input").focus(function() {
78		suggestInit();
79		suggestType = 1;
80		suggestStr = $(this).val();
81		suggestBox = $(this).next("div.box-suggest-detail");
82		if (suggestStr.length >= 2) {
83			suggestLists = suggestBox.find('.box-suggest-list li');
84			suggestBox.show();
85	  	}
86  	});
87	$("form div.box-suggest-search input").keyup(function(){
88    	var suggestVal = $(this).val();
89		if (suggestStr === suggestVal) {return;}
90		suggestStr = suggestVal;
91    if(suggestVal == "" || suggestVal.length < 2){
92		suggestInit();
93    } else {
94        $.ajax({
95            url: '/recipe/api/suggest.php',
96            type: 'POST', // getかpostを指定(デフォルトは前者)
97            dataType: 'json', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる
98            cache: false,
99            data: {
100                search_condition: suggestVal,
101            }
102        })
103        .done(function (response) {
104            var replacement = document.getElementsByClassName("box-suggest-detail");
105            for (var i = 0; i < replacement.length; i++) {
106                replacement[i].innerHTML = response.resultHtml;
107            }
108			suggestLists = suggestBox.find('.box-suggest-list li');
109			suggestNumber = -1;
110			suggestListAddEvent(suggestLists);
111        })
112        .fail(function () {
113        });
114		suggestBox.show();
115    }
116  });
117  
118  $("form div.header-suggest-search input").focus(function() {
119	  suggestInit();
120	  suggestType = 2;
121	  suggestStr = $(this).val();
122	  suggestBox = $(this).next("div.header-suggest-detail");
123	  if (suggestStr.length >= 2) {
124		  suggestLists = suggestBox.find('.box-suggest-list li');
125		  suggestBox.show();
126	  }
127  });
128  $("form div.header-suggest-search input").keyup(function(){
129    var suggestVal = $(this).val();
130	if (suggestStr === suggestVal) {return;}
131	suggestStr = suggestVal;
132    if(suggestVal == "" || suggestVal.length < 2){
133		suggestInit();
134    } else {
135        $.ajax({
136            url: '/recipe/api/suggest.php',
137            type: 'POST', // getかpostを指定(デフォルトは前者)
138            dataType: 'json', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる
139            cache: false,
140            data: {
141                search_condition: suggestVal,
142                search_target: 'header',
143            }
144        })
145        .done(function (response) {
146			var replacement = document.getElementById("header-box-suggest-detail");
147            replacement.innerHTML=response.resultHtml;
148			suggestLists = suggestBox.find('.box-suggest-list li');
149			suggestNumber = -1;
150			suggestListAddEvent(suggestLists);
151			
152        })
153        .fail(function () {
154        });
155		suggestBox.show();
156    }
157  });
158
159});
160
161function setSuggest(value) {
162    var suggestBox = $("form div.box-suggest-search input");
163    suggestBox.val(value);
164    $("form[name=main_recipe]").submit();
165}
166
167function setSuggestHeader(value) {
168    var suggestBox = $("form div.header-suggest-search input");
169    suggestBox.val(value);
170    formname = document.getElementById("main");
171    document.main.submit();
172}