{ Hello Magento 2 }

解决 Magento 2 应用问题,更注重深度挖掘。(ง •̀_•́)ง

0%

JS 搜索提示

  1. 考虑中文输入问题
  2. 考虑输入的时间间隔,不一直请求后端,1 s 内的输入请求一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>search auto complete</title>
</head>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<body>
<form id="search_form" action="" method="get">
<div class="field-set">
<div class="input-box">
<input type="search" id="search" name="q" placeholder="Search" maxlength="255" class="searchText input-text required-entry" autocomplete="off"/>
</div>
<div class="action">
<button type="submit"><span>Submit</span></button>
</div>
<ul id="autocomplete_terms_ul">
</ul>
</div>
</form>
</body>
<style>
#autocomplete_terms_ul {
position: absolute;
background: white;
display: block;
width: 270px;
z-index: 999;
color: #333;
moz-box-shadow:2px 2px 5px #555;
-webkit-box-shadow:2px 2px 5px #555;
box-shadow: 2px 2px 5px #555;
border: 1px solid #ededed8c;
padding: 5px 0px;
display: none;
}
#autocomplete_terms_ul li{
padding: 8px 10px;
cursor: pointer;
}
#autocomplete_terms_ul li:hover{
background-color: #e6e6e691;
}
#autocomplete_terms_ul li span{
float:right;
}
</style>
<script>
jQuery(document).ready(function() {
var $ = jQuery,
timeout,
flag = true,
searchInput = $('#search'),
searchForm = $("#search_form"),
suggestBox = $("#autocomplete_terms_ul"),
url = "http://autocomplete/";

var doQuery = function (url, keyward) {
// return $.ajax({
// type: "POST",
// url: url,
// data: {prefix: keyward, count:10},
// success: function (response) {
// showSuggestBox(JSON.parse(response));
// }
// });
var response = [{"KW":"apple", "QR":"10"},{"KW":"banana", "QR":"7"}];
showSuggestBox(response);
};

var hideSuggestBox = function() {
suggestBox.html('');
suggestBox.hide();
};

var showSuggestBox = function(terms) {
if (terms.length){
var html = '';
$.each(terms, function (key, val) {
html = html + '<li>' + val.KW + '<span>'+ val.QR +'</span></li>';
});
suggestBox.html(html);
suggestBox.show();
}
};

searchInput.bind('compositionstart', function () {
flag = false;
}).bind('compositionend', function () {
flag = true;
// compositionend 在 input 之后触发
$(this).trigger('input');
}).bind('input', function () {
var keyword = $(this).val();
if (flag) {
if (keyword) {
clearTimeout(timeout);
timeout = setTimeout(
function () {
doQuery(url, keyword);
}, 1000);
} else {
// important
clearTimeout(timeout);
}
}
hideSuggestBox();
});

suggestBox.on('click', 'li', function () {
var suggest = $(this).clone().children().remove().end().text();
searchInput.val(suggest);
hideSuggestBox();
setTimeout(function () {
searchForm.submit();
}, 500);
});

});
</script>
</html>