diff --git a/dist/bootstrap-suggest.css b/dist/bootstrap-suggest.css
index 9ff70c6..09e9c3e 100644
--- a/dist/bootstrap-suggest.css
+++ b/dist/bootstrap-suggest.css
@@ -1,5 +1,5 @@
/*!
- * bootstra-suggest - v2.0.1 (https://github.com/lodev09/bootstrap-suggest#readme)
+ * bootstra-suggest - v2.0.3 (https://github.com/lodev09/bootstrap-suggest#readme)
* Copyright 2013-2019 Jovanni Lo (lodev09@gmail.com)
* Licensed under MIT (https://github.com/lodev09/bootstrap-suggest/blob/master/LICENSE)
*/
@@ -14,6 +14,8 @@
.suggest > .dropdown-menu {
margin-top: 15px;
position: absolute;
+ height: 200px;
+ overflow-y: scroll
}
.suggest > .dropdown-menu > a.dropdown-item {
@@ -24,3 +26,4 @@
.suggest > .dropdown-menu > a.dropdown-item:first-child {
border-top: 0;
}
+
diff --git a/dist/bootstrap-suggest.js b/dist/bootstrap-suggest.js
index a978209..fb277aa 100644
--- a/dist/bootstrap-suggest.js
+++ b/dist/bootstrap-suggest.js
@@ -1,5 +1,5 @@
/* ===================================================
-* bootstrap-suggest.js
+* bootstrap-suggest.js v2.0.3
* http://github.com/lodev09/bootstrap-suggest
* ===================================================
* Copyright 2019 Jovanni Lo @lodev09
@@ -35,7 +35,7 @@
this.$dropdown = $('
', {
'class': 'dropdown suggest ' + this.options.dropdownClass,
- 'html': $('', {'class': 'dropdown-menu', role: 'menu'}),
+ 'html': $('', {'class': 'dropdown-menu', role: 'menu'}),
'data-key': this.key
});
@@ -208,13 +208,16 @@
that.hide();
}
- $dropdown.on('click', 'a.dropdown-item', function(e) {
+ $dropdown
+ .on('click', 'li:has(a)', function(e) {
e.preventDefault();
that.__select($(this).index());
that.$element.focus();
- }).on('mouseover', 'a.dropdown-item', function(e) {
+ })
+ .on('mouseover', 'li:has(a)', function(e) {
that.$element.off('blur', blur);
- }).on('mouseout', 'a.dropdown-item', function(e) {
+ })
+ .on('mouseout', 'li:has(a)', function(e) {
that.$element.on('blur', blur);
});
@@ -241,7 +244,7 @@
//if (!$next.length) return false;
if ($this.is('.active')) {
- if (!$next.is('.d-none')) {
+ if (!$next.is('.hidden')) {
$this.removeClass('active');
$next.addClass('active');
}
@@ -259,7 +262,7 @@
//if (!$prev.length) return false;
if ($this.is('.active')) {
- if (!$prev.is('.d-none')) {
+ if (!$prev.is('.hidden')) {
$this.removeClass('active');
$prev.addClass('active');
}
@@ -293,12 +296,10 @@
_item.value = dataItem;
}
- return $('', {
- 'class': 'dropdown-item',
- 'data-value': _item.value,
+ return $('', {'data-value': _item.value}).html($('', {
href: '#',
html: _item.text
- });
+ })).addClass('dropdown-item');
},
__select: function(index) {
@@ -308,7 +309,7 @@
item = this.get(index),
setCaretPos = this._keyPos + item.value.length + 1;
- $el.val(val.slice(0, this._keyPos) + item.value + ' ' + val.slice(this.__getSelection(el).start));
+ $el.val(val.slice(0, this._keyPos) + item.value + this.options.endKey + val.slice(this.__getSelection(el).start));
if (el.setSelectionRange) {
el.setSelectionRange(setCaretPos, setCaretPos);
@@ -347,8 +348,7 @@
}
}
}
-
- return $dropdownMenu.find('a.dropdown-item');
+ return $dropdownMenu.find('li:has(a)');
},
__lookup: function(q, $resultItems) {
@@ -364,21 +364,21 @@
__filterData: function(q, data) {
var options = this.options;
-
- this.$items.addClass('d-none');
+ this.$items.addClass('hidden');
this.$items.filter(function (index) {
// return the limit if q is empty
if (q === '') return index < options.filter.limit;
- var value = $(this).text();
+ var $this = $(this),
+ value = $this.find('a:first').text();
if (!options.filter.casesensitive) {
value = value.toLowerCase();
q = q.toLowerCase();
}
return value.indexOf(q) != -1;
- }).slice(0, options.filter.limit).removeClass('d-none active');
+ }).slice(0, options.filter.limit).removeClass('hidden active');
return this.__getVisibleItems();
},
@@ -387,7 +387,7 @@
var $item = this.$items.eq(index);
return {
- text: $item.text(),
+ text: $item.children('a:first').text(),
value: $item.attr('data-value'),
index: index,
$element: $item
@@ -430,7 +430,7 @@
},
hide: function() {
- this.$dropdown.find('.dropdown-menu').removeClass('show');
+ this.$dropdown.removeClass('open show');
this.isShown = false;
if(this.$items) {
this.$items.removeClass('active');
@@ -453,7 +453,7 @@
if (!this.isShown) {
- $dropdownMenu.addClass('show');
+ this.$dropdown.addClass('open show');
if (options.position !== false) {
caretPos = this.__getCaretPos(this._keyPos);
@@ -572,6 +572,7 @@
casesensitive: false,
limit: 5
},
+ endKey: ' ',
dropdownClass: '',
position: 'caret',
// events hook
diff --git a/dist/bootstrap-suggest.min.js b/dist/bootstrap-suggest.min.js
index 036ad6d..c397a67 100644
--- a/dist/bootstrap-suggest.min.js
+++ b/dist/bootstrap-suggest.min.js
@@ -2,6 +2,30 @@
* bootstra-suggest - v2.0.1 (https://github.com/lodev09/bootstrap-suggest#readme)
* Copyright 2013-2019 Jovanni Lo (lodev09@gmail.com)
* Licensed under MIT (https://github.com/lodev09/bootstrap-suggest/blob/master/LICENSE)
- */
+*/
-!function(l){"use strict";var a=function(t,e,i){this.$element=l(t),this.$items=void 0,this.options=l.extend(!0,{},l.fn.suggest.defaults,i,this.$element.data(),this.$element.data("options")),this.key=e,this.isShown=!1,this.query="",this._queryPos=[],this._keyPos=-1,this.$dropdown=l("",{class:"dropdown suggest "+this.options.dropdownClass,html:l("",{class:"dropdown-menu",role:"menu"}),"data-key":this.key}),this.load()};a.prototype={__setListener:function(){return this.$element.on("suggest.show",l.proxy(this.options.onshow,this)).on("suggest.select",l.proxy(this.options.onselect,this)).on("suggest.lookup",l.proxy(this.options.onlookup,this)).on("keyup",l.proxy(this.__keyup,this)),this},__getCaretPos:function(t){var h=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing"],d=!(null==window.mozInnerScreenX);return function(t,e,i){var o=document.createElement("div");o.id="input-textarea-caret-position-mirror-div",document.body.appendChild(o);var s=o.style,n=window.getComputedStyle?getComputedStyle(t):t.currentStyle;s.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(s.wordWrap="break-word"),s.position="absolute",s.visibility="hidden",l.each(h,function(t,e){s[e]=n[e]}),d?(s.width=parseInt(n.width)-2+"px",t.scrollHeight>parseInt(n.height)&&(s.overflowY="scroll")):s.overflow="hidden",o.textContent=t.value.substring(0,e),"INPUT"===t.nodeName&&(o.textContent=o.textContent.replace(/\s/g," "));var r=document.createElement("span");r.textContent=t.value.substring(e)||".",o.appendChild(r);var a={top:r.offsetTop+parseInt(n.borderTopWidth),left:r.offsetLeft+parseInt(n.borderLeftWidth)};return document.body.removeChild(o),a}(this.$element.get(0),t)},__keyup:function(t){switch(t.keyCode){case 27:return void this.hide();case 13:return!0}if(-1===l.inArray(t.keyCode,[38,40,37,39,17,18,9,16,20,91,93,36,35,45,33,34,144,112,113,114,115,116,117,118,119,120,121,122,123,145,19]))for(var e=this.$element,i=e.val(),o=this.__getSelection(e.get(0)).start,s=o;0<=s;s--){var n=l.trim(i.substring(s-1,s));if(!n){this.hide();break}if(n===this.key&&""==l.trim(i.substring(s-2,s-1))){this.query=i.substring(s,o),this._queryPos=[s,o],this._keyPos=s,this.lookup(this.query);break}}},__getVisibleItems:function(){return this.$items?this.$items.not(".d-none"):l()},__build:function(){var t=this.$dropdown,e=this,i=function(t){e.hide()};t.on("click","a.dropdown-item",function(t){t.preventDefault(),e.__select(l(this).index()),e.$element.focus()}).on("mouseover","a.dropdown-item",function(t){e.$element.off("blur",i)}).on("mouseout","a.dropdown-item",function(t){e.$element.on("blur",i)}),this.$element.before(t).on("blur",i).on("keydown",function(t){var o;if(e.isShown)switch(t.keyCode){case 13:return(o=e.__getVisibleItems()).each(function(t){l(this).is(".active")&&e.__select(l(this).index())}),!1;case 40:return(o=e.__getVisibleItems()).last().is(".active")||o.each(function(t){var e=l(this),i=o.eq(t+1);if(e.is(".active"))return i.is(".d-none")||(e.removeClass("active"),i.addClass("active")),!1}),!1;case 38:return(o=e.__getVisibleItems()).first().is(".active")||o.each(function(t){var e=l(this),i=o.eq(t-1);if(e.is(".active"))return i.is(".d-none")||(e.removeClass("active"),i.addClass("active")),!1}),!1}})},__mapItem:function(t){var e={text:"",value:""};return!(this.options.map&&!(t=this.options.map(t)))&&(t instanceof Object?(e.text=t.text||"",e.value=t.value||""):(e.text=t,e.value=t),l("",{class:"dropdown-item","data-value":e.value,href:"#",html:e.text}))},__select:function(t){var e=this.$element,i=e.get(0),o=e.val(),s=this.get(t),n=this._keyPos+s.value.length+1;if(e.val(o.slice(0,this._keyPos)+s.value+" "+o.slice(this.__getSelection(i).start)),i.setSelectionRange)i.setSelectionRange(n,n);else if(i.createTextRange){var r=i.createTextRange();r.collapse(!0),r.moveEnd("character",n),r.moveStart("character",n),r.select()}e.trigger(l.extend({type:"suggest.select"},this),s),this.hide()},__getSelection:function(t){return t.focus(),{start:t.selectionStart,end:t.selectionEnd}},__buildItems:function(t){var e=this.$dropdown.find(".dropdown-menu");if(e.empty(),t&&t instanceof Array)for(var i in t){var o=this.__mapItem(t[i]);o&&e.append(o)}return e.find("a.dropdown-item")},__lookup:function(t,e){e.eq(0).addClass("active");this.$element.trigger(l.extend({type:"suggest.lookup"},this),[t,e]),e&&e.length?this.show():this.hide()},__filterData:function(i,t){var o=this.options;return this.$items.addClass("d-none"),this.$items.filter(function(t){if(""===i)return t',{'class':'dropdown suggest '+this.options.dropdownClass,'html':$('',{'class':'dropdown-menu',role:'menu'}),'data-key':this.key});this.load();};Suggest.prototype={__setListener:function(){this.$element.on('suggest.show',$.proxy(this.options.onshow,this)).on('suggest.select',$.proxy(this.options.onselect,this)).on('suggest.lookup',$.proxy(this.options.onlookup,this)).on('keyup',$.proxy(this.__keyup,this));return this;},__getCaretPos:function(posStart){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing'];var isFirefox=!(window.mozInnerScreenX==null);var getCaretCoordinatesFn=function(element,position,recalculate){var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')
+style.wordWrap='break-word';style.position='absolute';style.visibility='hidden';$.each(properties,function(index,value){style[value]=computed[value];});if(isFirefox){style.width=parseInt(computed.width)-2+'px';if(element.scrollHeight>parseInt(computed.height))
+style.overflowY='scroll';}else{style.overflow='hidden';}
+div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')
+div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};document.body.removeChild(div);return coordinates;}
+return getCaretCoordinatesFn(this.$element.get(0),posStart);},__keyup:function(e){var specialChars=[38,40,37,39,17,18,9,16,20,91,93,36,35,45,33,34,144,112,113,114,115,116,117,118,119,120,121,122,123,145,19];switch(e.keyCode){case 27:this.hide();return;case 13:return true;}
+if($.inArray(e.keyCode,specialChars)!==-1)return;var $el=this.$element,val=$el.val(),currentPos=this.__getSelection($el.get(0)).start;for(var i=currentPos;i>=0;i--){var subChar=$.trim(val.substring(i-1,i));if(!subChar){this.hide();break;}
+if(subChar===this.key&&$.trim(val.substring(i-2,i-1))==''){this.query=val.substring(i,currentPos);this._queryPos=[i,currentPos];this._keyPos=i;this.lookup(this.query);break;}}},__getVisibleItems:function(){return this.$items?this.$items.not('.d-none'):$();},__build:function(){var elems=[],$item,$dropdown=this.$dropdown,that=this;var blur=function(e){that.hide();}
+$dropdown.on('click','li:has(a)',function(e){e.preventDefault();that.__select($(this).index());that.$element.focus();}).on('mouseover','li:has(a)',function(e){that.$element.off('blur',blur);}).on('mouseout','li:has(a)',function(e){that.$element.on('blur',blur);});this.$element.before($dropdown).on('blur',blur).on('keydown',function(e){var $visibleItems;if(that.isShown){switch(e.keyCode){case 13:$visibleItems=that.__getVisibleItems();$visibleItems.each(function(index){if($(this).is('.active'))
+that.__select($(this).index());});return false;break;case 40:$visibleItems=that.__getVisibleItems();if($visibleItems.last().is('.active'))return false;$visibleItems.each(function(index){var $this=$(this),$next=$visibleItems.eq(index+1);if($this.is('.active')){if(!$next.is('.hidden')){$this.removeClass('active');$next.addClass('active');}
+return false;}});return false;case 38:$visibleItems=that.__getVisibleItems();if($visibleItems.first().is('.active'))return false;$visibleItems.each(function(index){var $this=$(this),$prev=$visibleItems.eq(index-1);if($this.is('.active')){if(!$prev.is('.hidden')){$this.removeClass('active');$prev.addClass('active');}
+return false;}})
+return false;}}});},__mapItem:function(dataItem){var itemHtml,that=this,_item={text:'',value:''};if(this.options.map){dataItem=this.options.map(dataItem);if(!dataItem)return false;}
+if(dataItem instanceof Object){_item.text=dataItem.text||'';_item.value=dataItem.value||'';}else{_item.text=dataItem;_item.value=dataItem;}
+return $('',{'data-value':_item.value}).html($('',{href:'#',html:_item.text})).addClass('dropdown-item');},__select:function(index){var $el=this.$element,el=$el.get(0),val=$el.val(),item=this.get(index),setCaretPos=this._keyPos+item.value.length+1;$el.val(val.slice(0,this._keyPos)+item.value+this.options.endKey+val.slice(this.__getSelection(el).start));if(el.setSelectionRange){el.setSelectionRange(setCaretPos,setCaretPos);}else if(el.createTextRange){var range=el.createTextRange();range.collapse(true);range.moveEnd('character',setCaretPos);range.moveStart('character',setCaretPos);range.select();}
+$el.trigger($.extend({type:'suggest.select'},this),item);this.hide();},__getSelection:function(el){el.focus();return{start:el.selectionStart,end:el.selectionEnd};},__buildItems:function(data){var $dropdownMenu=this.$dropdown.find('.dropdown-menu');$dropdownMenu.empty();if(data&&data instanceof Array){for(var i in data){var $item=this.__mapItem(data[i]);if($item){$dropdownMenu.append($item);}}}
+return $dropdownMenu.find('li:has(a)');},__lookup:function(q,$resultItems){var active=$resultItems.eq(0).addClass('active');this.$element.trigger($.extend({type:'suggest.lookup'},this),[q,$resultItems]);if($resultItems&&$resultItems.length){this.show();}else{this.hide();}},__filterData:function(q,data){var options=this.options;this.$items.addClass('hidden');this.$items.filter(function(index){if(q==='')return index', {
'class': 'dropdown suggest ' + this.options.dropdownClass,
- 'html': $('', {'class': 'dropdown-menu', role: 'menu'}),
+ 'html': $('', {'class': 'dropdown-menu', role: 'menu'}),
'data-key': this.key
});
@@ -180,13 +180,12 @@
for (var i = currentPos; i >= 0; i--) {
var subChar = $.trim(val.substring(i-1, i));
- if (!subChar && this.options.respectWhitespace) {
+ if (!subChar) {
this.hide();
break;
}
- var isSpaceBefore = $.trim(val.substring(i - 2, i - 1)) == '';
- if (subChar === this.key && (isSpaceBefore || !this.options.respectWhitespace)) {
+ if (subChar === this.key && $.trim(val.substring(i-2, i-1)) == '') {
this.query = val.substring(i, currentPos);
this._queryPos = [i, currentPos];
this._keyPos = i;
@@ -209,13 +208,16 @@
that.hide();
}
- $dropdown.on('click', 'a.dropdown-item', function(e) {
+ $dropdown
+ .on('click', 'li:has(a)', function(e) {
e.preventDefault();
that.__select($(this).index());
that.$element.focus();
- }).on('mouseover', 'a.dropdown-item', function(e) {
+ })
+ .on('mouseover', 'li:has(a)', function(e) {
that.$element.off('blur', blur);
- }).on('mouseout', 'a.dropdown-item', function(e) {
+ })
+ .on('mouseout', 'li:has(a)', function(e) {
that.$element.on('blur', blur);
});
@@ -224,7 +226,6 @@
if (that.isShown) {
switch (e.keyCode) {
case 13: // enter key
- case 9: // tab key
$visibleItems = that.__getVisibleItems();
$visibleItems.each(function(index) {
if ($(this).is('.active'))
@@ -243,7 +244,7 @@
//if (!$next.length) return false;
if ($this.is('.active')) {
- if (!$next.is('.d-none')) {
+ if (!$next.is('.hidden')) {
$this.removeClass('active');
$next.addClass('active');
}
@@ -261,7 +262,7 @@
//if (!$prev.length) return false;
if ($this.is('.active')) {
- if (!$prev.is('.d-none')) {
+ if (!$prev.is('.hidden')) {
$this.removeClass('active');
$prev.addClass('active');
}
@@ -279,8 +280,7 @@
var itemHtml, that = this,
_item = {
text: '',
- value: '',
- class: ''
+ value: ''
};
if (this.options.map) {
@@ -291,30 +291,25 @@
if (dataItem instanceof Object) {
_item.text = dataItem.text || '';
_item.value = dataItem.value || '';
- _item.class = dataItem.class || '';
} else {
_item.text = dataItem;
_item.value = dataItem;
}
- return $('', {
- 'class': 'dropdown-item' + ' ' + _item.class,
- 'data-value': _item.value,
+ return $('', {'data-value': _item.value}).html($('', {
href: '#',
html: _item.text
- });
+ })).addClass('dropdown-item');
},
__select: function(index) {
- var endKey = this.options.endKey || '';
var $el = this.$element,
el = $el.get(0),
val = $el.val(),
item = this.get(index),
setCaretPos = this._keyPos + item.value.length + 1;
- $el.val(val.slice(0, this._keyPos) + item.value + endKey + ' ' + val.slice(this.__getSelection(el).start));
- $el.blur();
+ $el.val(val.slice(0, this._keyPos) + item.value + this.options.endKey + val.slice(this.__getSelection(el).start));
if (el.setSelectionRange) {
el.setSelectionRange(setCaretPos, setCaretPos);
@@ -353,8 +348,7 @@
}
}
}
-
- return $dropdownMenu.find('a.dropdown-item');
+ return $dropdownMenu.find('li:has(a)');
},
__lookup: function(q, $resultItems) {
@@ -370,23 +364,21 @@
__filterData: function(q, data) {
var options = this.options;
-
- this.$items.addClass('d-none');
+ this.$items.addClass('hidden');
this.$items.filter(function (index) {
// return the limit if q is empty
if (q === '') return index < options.filter.limit;
- var value = $(this).text();
- var selectorValue = $(this).data().value;
+ var $this = $(this),
+ value = $this.find('a:first').text();
if (!options.filter.casesensitive) {
value = value.toLowerCase();
q = q.toLowerCase();
- selectorValue = selectorValue.toLowerCase();
}
- return value.indexOf(q) != -1 || selectorValue.indexOf(q) != -1;
- }).slice(0, options.filter.limit).removeClass('d-none active');
+ return value.indexOf(q) != -1;
+ }).slice(0, options.filter.limit).removeClass('hidden active');
return this.__getVisibleItems();
},
@@ -395,7 +387,7 @@
var $item = this.$items.eq(index);
return {
- text: $item.text(),
+ text: $item.children('a:first').text(),
value: $item.attr('data-value'),
index: index,
$element: $item
@@ -438,7 +430,7 @@
},
hide: function() {
- this.$dropdown.find('.dropdown-menu').removeClass('show');
+ this.$dropdown.removeClass('open show');
this.isShown = false;
if(this.$items) {
this.$items.removeClass('active');
@@ -461,7 +453,7 @@
if (!this.isShown) {
- $dropdownMenu.addClass('show');
+ this.$dropdown.addClass('open show');
if (options.position !== false) {
caretPos = this.__getCaretPos(this._keyPos);
@@ -580,10 +572,9 @@
casesensitive: false,
limit: 5
},
+ endKey: ' ',
dropdownClass: '',
position: 'caret',
- endKey: '',
- respectWhitespace: true,
// events hook
onshow: function(e) {},
onselect: function(e, item) {},
@@ -598,4 +589,4 @@
return this;
}
-}( jQuery ));
+}( jQuery ));
\ No newline at end of file
diff --git a/src/bootstrap-suggest.scss b/src/bootstrap-suggest.scss
index e1e6927..cf0008f 100644
--- a/src/bootstrap-suggest.scss
+++ b/src/bootstrap-suggest.scss
@@ -7,6 +7,8 @@
> .dropdown-menu {
margin-top: 15px;
position: absolute;
+ height: 200px;
+ overflow-y: scroll;
> a.dropdown-item {
border-top: 1px solid #eeeeee;