window.onload = function () {
var ar_mft_block = [],
_inp = document.getElementsByClassName('auto-complete-prop-mft')[0].getElementsByTagName('input'),
_block = document.getElementsByClassName('auto-complete-prop-mft-block')[0];
for(var i = 0; i < _block.childNodes.length; i++) {
_block.childNodes[i].onclick = function () {
for(var j = 0; j < _inp.length; j++)
if(_inp[j].type == 'text') {
_inp[j].value = this.getElementsByTagName('p')[0].innerHTML;
_inp[j].parentNode.getElementsByTagName('span')[0].innerHTML =
this.getElementsByTagName('span')[0].innerHTML;
_block.style.display = 'none';
break;
}
}
}
for(var i = 0; i < _inp.length; i++) {
if(_inp[i].type == 'text') {
_inp[i].onkeyup = function () {
if(this.value.length > 0) {
var val_elm;
for(var j = 0; j < _block.childNodes.length; j++) {
if(_block.childNodes[j].tagName == 'LI') {
val_elm = _block.childNodes[j].getElementsByTagName('span')[0].innerHTML.toLowerCase();
_block.childNodes[j].style.display = (val_elm.indexOf(this.value.toLowerCase()) > -1 ? 'block' : 'none');
}
}
_block.style.display = 'block';
} else _block.style.display = 'none';
}
_inp[i].onfocus = function () {
this.select();
}
break;
}
}
этот же скрипт переписал на jqury
$(document).ready(function () {
$('.auto-complete-prop-mft input:text').click(function () {
$(this).select();
});
$('.auto-complete-prop-mft-block li').click(function () {
$('.auto-complete-prop-mft input:text').val($(this).find('p').html());
$('.auto-complete-prop-mft input:text').parent().find('span').html($(this).find('span').html());
$('.auto-complete-prop-mft-block').hide();
});
$('.auto-complete-prop-mft input:text').on('keyup', function () {
if($(this).val().length > 0) {
$('.auto-complete-prop-mft-block li').each(function () {
$(this).css('display', (
$(this).find('span').html().toLowerCase().indexOf($('.auto-complete-prop-mft input:text').val().toLowerCase()) > -1 ?
'block' : 'none'
));
});
$('.auto-complete-prop-mft-block').show();
} else
$('.auto-complete-prop-mft-block').hide();
});
});
Теперь на событие keyup все очень долго происходит, в 5-10 раз медленнее чем на js. В чем проблема?
Хотя на js идет точно такой же перебор элементов списка..
li
например$('.auto-complete-prop-mft input:text').val()
совсем не то же самое что иthis.value.toLowerCase()