/
dropdown-searchable.js
132 lines (115 loc) · 3.22 KB
/
dropdown-searchable.js
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
124
125
126
127
128
129
130
131
132
;(function ( $ ) {
$.fn.searchable = function( options ) {
return this.each(function() {
let settings = $.extend({
data : null,
feed : null,
placeholder : 'search',
delay : 0,
}, options , true),
self = $(this),
dropdown = self.find('.dropdown-menu'),
query,
classname = 'dropdown-searchable',
input = function() {
self
.find('.dropdown-menu')
.prepend(function() {
let html = ''
html += '<li class="'+classname+'__wrapper" style="padding:0 15px">'
html += '<input type="text" class="form-control '+classname+'__finder" placeholder="'+settings.placeholder+'" />'
html += '</li>'
return html
})
},
finder = function() {
self
.find('.'+classname+'__finder')
.bind('keyup' , function() {
let el = $(this)
offset(function() {
query = el.val().toLowerCase() || ''
self.trigger('beforeSearch')
if (settings.data == null && settings.feed == null) search.static()
if (settings.data != null && settings.feed == null) search.data()
if (settings.feed != null) search.feed()
}, settings.delay)
})
query = self.find('.'+classname+'__finder').val() || ''
if (settings.data != null && settings.feed == null) search.data()
if (settings.feed != null) search.feed()
},
search = {
static : function() {
let i = 0
self
.find('li')
.not('.'+classname+'__wrapper')
.each(function() {
if($(this).text().toLowerCase().indexOf(query) > -1) {
$(this).show()
++i
} else {
$(this).hide()
}
})
i == 0 && self.trigger('notFound')
self.trigger('afterSearch')
},
data : function() {
let i = 0
clean()
for(var k in settings.data) {
if(settings.data[k].text.toLowerCase().indexOf(query) > -1) {
dropdown.append(render(
settings.data[k].href,
settings.data[k].text
))
++i
}
}
i == 0 && self.trigger('notFound')
self.trigger('afterSearch')
},
feed : function() {
$.post(settings.feed+'?query='+query)
.done(function(data) {
clean()
var response = JSON.parse(data)
!response.length && self.trigger('notFound')
if(response.length) {
for(var k in response) {
dropdown.append(render(
response[k].href,
response[k].text
))
}
}
}).fail(function() {
clean()
self.trigger('notFound')
})
self.trigger('afterSearch')
}
},
render = function(href, text) {
return '<li><a href="'+href+'">'+text+'</a></li>'
},
clean = function() {
self
.find('li')
.not('.'+classname+'__wrapper')
.remove()
},
offset = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer)
timer = setTimeout(callback, ms)
}
})()
input()
finder()
})
};
}( jQuery ));