search-list-extra.js
2.67 KB
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
import Page from 'js/yoho-page';
import Tip from 'js/plugin/tip';
import maybeLike from 'js/channel/maybe-like';
class SearchListExtra extends Page {
constructor() {
super();
this.selector = {
input: $('#search-input').find('input[name="query"]'),
clear: $('#search-input .clear-input'),
buriedpoint: $('.buriedpoint'),
search: $('#search')
};
this.selector.clear.on('click', () => {
this.selector.input.val('').trigger('input');
});
this.init();
}
init() {
maybeLike({recpose: 100101, isExecute: true});
this.inputAction();
}
/**
* 搜索输入联动
*/
inputAction() {
let $searchAssociate = $('.search-associate');
let $icon = $('.search-icon');
let $searchItems = $('.search-items');
this.selector.input.on('input', () => {
if (this.selector.input.val() === '') {
$icon.css('color', '#b2b2b2');
this.selector.clear.addClass('hide');
$searchAssociate.html('');
$searchItems.show();
$searchAssociate.hide();
} else {
$icon.css('color', '#666');
this.selector.clear.removeClass('hide');
$searchAssociate.show();
}
// 联动搜索
$.ajax({
url: '/product/search/fuzzyDatas',
data: {
keyword: this.selector.input.val()
},
dataType: 'json',
success: (data) => {
let ajaxHtml = '';
let i;
if (data.length > 0) {
for (i = 0; i < data.length; i++) {
ajaxHtml += '<li><span class="keyword">' + data[i].keyword + '</span><span class="count">' +
data[i].count + ' items<i class="iconfont"></i></span></li>';
}
$searchAssociate.html(ajaxHtml);
$searchItems.hide();
} else {
$searchAssociate.html('');
}
$searchAssociate.find('li').on('click', event => {
this.selector.buriedpoint.val($(event.currentTarget).find('.keyword').html());
this.selector.search.closest('form').submit();
});
},
error: () => {
Tip.show('网络断开连接了~');
}
});
});
}
}
export default SearchListExtra;