Skip to content

Instantly share code, notes, and snippets.

@nenodias

nenodias/index.html

Last active November 3, 2016 23:01
Show Gist options
  • Save nenodias/aae059fa03e49e431a4de24b59707e7b to your computer and use it in GitHub Desktop.
Save nenodias/aae059fa03e49e431a4de24b59707e7b to your computer and use it in GitHub Desktop.
Download ZIP
Page testing create a lookup jquery component
Raw
index.html
<html>
<head>
<title>Teste</title>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.nn-dropdown{
border: 1px #C7E2F1 solid;
height: 200px;
width: 200px;
min-height: 160px;
position: absolute;
overflow: auto;
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
font-size: 14px;
left: 0;
list-style: outside none none;
margin: 2px 0 0;
padding: 19px;
text-align: left;
z-index: 1000;
}
.nn-dropdown ul{
list-style: none;
}
.nn-dropdown ul li{
width:100%;
clear: both;
color: #333;
display: block;
font-weight: 400;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
.nn-dropdown ul li:hover{
background: #3399FF;
color: #fff;
}
.nn-list {
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form method="post">
<div class="form-group col-xs-4">
<label>Teste</label>
<select class="form-control">
<option>Item 1</option>
<option>Item 1</option>
<option>Item 1</option>
<option>Item 1</option>
<option>Item 1</option>
<option>Item 1</option>
</select>
</div>
<div class="form-group col-xs-4">
<label>Teste</label>
<input type="hidden" id="teste" class="form-control" />
</div>
</form>
<script type="text/javascript">
(function( $ ){
$.fn.selectSearch = function(config) {
var el = this[0];
var id = $(this).attr('id');
var labelField = null;
var valueField = el;
var elemento = {
loaded: false,
createLabelField: function(el){
var labelFieldElement = el.cloneNode();
labelFieldElement.removeAttribute('id');
labelFieldElement.removeAttribute('name');
labelFieldElement.removeAttribute('value');
labelFieldElement.setAttribute('type','text');
labelFieldElement.setAttribute('readonly','readonly');
return labelFieldElement;
},
createSearchField: function(el){
var fieldSearchElement = el.cloneNode();
fieldSearchElement.removeAttribute('id');
fieldSearchElement.removeAttribute('name');
fieldSearchElement.removeAttribute('value');
fieldSearchElement.setAttribute('type','text');
fieldSearchElement.className += ' nn-search';
return fieldSearchElement;
},
createLabelSearch: function(labelSearch){
var labelFieldElement = document.createElement('LABEL');
labelFieldElement.innerHTML = labelSearch;
return labelFieldElement;
},
createDiv: function(classDiv, children){
var divField = document.createElement('DIV');
divField.className = classDiv;
for(i in children){
divField.appendChild(children[i] );
}
return divField;
},
createDivContainer: function(children){
var divElement = document.createElement('DIV');
divElement.className = 'nn-dropdown';
for(i in children){
divElement.appendChild(children[i] );
}
return divElement;
},
clearItems:function(){
itemsList.innerHTML = '';
},
selectItem:function(item){
labelField.value = item.innerHTML;
valueField.value = item.getAttribute('data-value');
elemento.hideBox();
},
createItem:function(data){
var description = config.getDescription(data);
var value = config.getValue(data);
var item = document.createElement('LI');
item.innerHTML = description;
item.setAttribute('data-value', value);
return item;
},
loadByPk:function(){
if(valueField.value !== ""){
config.findById(valueField.value).done(function(data, textStatus, jqXHR){
var item = elemento.createItem(data);
elemento.selectItem(item);
}).fail(function(jqXHR, textStatus, errorThrown){
});
}
},
loadData: function(itemsList, search, limit, offset){
config.findSearch(search, limit, offset).done(function(data, textStatus, jqXHR){
if(data.length > 0){
for(var i =0; i< data.length; i++){
var item = elemento.createItem(data[i]);
item.addEventListener('click', function(e){
elemento.selectItem(this);
});
itemsList.appendChild(item);
}
}else{
elemento.loaded = true;
}
}).fail(function(jqXHR, textStatus, errorThrown){
elemento.loaded = true;
});
},
hideBox:function(){
$(divContainer).hide();
},
showBox:function(){
elemento.clearItems();
elemento.loaded = false;
offset = 0;
elemento.loadData(itemsList, fieldSearch.value, limit, offset);
$(divContainer).show();
}
};
labelField = elemento.createLabelField(el);
$(this).after(labelField);
var fieldSearch = elemento.createSearchField(el);
var labelSearch = elemento.createLabelSearch("Pesquisar");
var divField = elemento.createDiv('form-group', [labelSearch, fieldSearch]);
var itemsList = document.createElement('UL');
itemsList.className = 'list-group';
elemento.clearItems();
var limit = config.limit || 10;
var offset = 0;
var divList = document.createElement('DIV');
divList.className = 'nn-list';
divList.appendChild(itemsList);
var divContainer = elemento.createDivContainer([divField,divList]);
$(el).after(divContainer);
$(divContainer).hide();
el.addEventListener('focus',function(){
elemento.showBox();
});
labelField.addEventListener('focus',function(){
elemento.showBox();
});
var _throttleTimer = null;
var _throttleDelay = 100;
var ScrollHandler = function (e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log('scroll');
//do work
var scrollTop = $(divList).scrollTop();
var height = $(divList).height();
var ulHeight = $(divList).find('ul').height();
if ( ( scrollTop + height ) >= ulHeight ) {
console.log('Fazer o loading');
if(!elemento.loaded){
offset += 1;
elemento.loadData(itemsList, fieldSearch.value, limit, offset);
}
}
}, _throttleDelay);
};
$(divList)
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
$(document).on('click',function(event){
if(event.target){
var $target = $(event.target);
var isElement = $target.attr('id') == id || $target.hasClass('nn-dropdown')|| $target.closest('.nn-dropdown').length > 0 || event.target === labelField;
if(!isElement){
elemento.hideBox();
}
}
});
elemento.loadByPk();
var eventoKey = function(e){
if(e.keyCode === 13){
e.preventDefault();
elemento.clearItems();
offset = 0;
elemento.loaded = false;
elemento.loadData(itemsList, fieldSearch.value, limit, offset);
}else if(e.keyCode === 27){
elemento.hideBox();
}
};
fieldSearch.addEventListener('keyup',eventoKey);
fieldSearch.addEventListener('keypress',eventoKey);
valueField.addEventListener('keyup',function(e){
if(e.keyCode === 27){
elemento.hideBox();
}
});
labelField.addEventListener('keyup',function(e){
if(e.keyCode === 27){
elemento.hideBox();
}
});
if(config.hideField){
$(valueField).hide();
}
if(config.onChangeValueLoad){
valueField.addEventListener('change', function(){
elemento.loadByPk();
});
}
return this;
};
})( jQuery );
$("#teste").selectSearch({
findSearch:function(search, limit, offset){
var d1 = $.Deferred();
if(offset == 0){
d1.resolve(
[
{'valor':'1','descricao':'Item 1'},
{'valor':'2','descricao':'Item 2'},
{'valor':'3','descricao':'Item 3'},
{'valor':'4','descricao':'Item 4'},
{'valor':'5','descricao':'Item 5'},
{'valor':'6','descricao':'Item 6'},
]
);
}
if(offset == 1){
d1.resolve(
[
{'valor':'7','descricao':'Item 7'},
{'valor':'8','descricao':'Item 8'},
{'valor':'9','descricao':'Item 9'},
{'valor':'10','descricao':'Item 10'}
]
);
}
if(offset == 2){
d1.resolve(
[
{'valor':'11','descricao':'Item 11'},
{'valor':'12','descricao':'Item 12'},
{'valor':'13','descricao':'Item 13'},
{'valor':'14','descricao':'Item 14'}
]
);
}
return d1;
},
findById:function(id){
var d1 = $.Deferred();
d1.resolve({'valor':id,'descricao':'Item '+id});
return d1;
},
getDescription: function(data){
return data.descricao;
},
getValue: function(data){
return data.valor;
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment