Снова поднимаю тему ))
Есть некий input, задача которого принять от пользователя данные.
Если данные есть уже в списке, который автоматически раскрывается,
то пользователь просто выберет нужную ему категорию и продолжит создание темы.
А если название новое и пользователь не нашел нужной ему категории в списке, то список не
закрывается при клике на другой участок браузера ,
как происходит скажем при клике(onBlur).Как мне сделать, чтобы список закрывался при onBlur
или другом событии, не могу понять как довести до идеала или что-то похожее было на правду.
Так же прошу помощи в исправлениях моих ошибках в коде и оптимизации JS
http://lovelife.su/newtime
В последствии всё это будет подгужаться с помощь ajax в виде json
// var slovos = new Array();
var s_json = new Array();
var oldValue;
// var reps = new Array();
// var list = new Array();
// var greats = new Array();
var lis_input_catalog = 'Введите название';
var lis_new_catalog = 'Новая категория';
var lis_start = '<div style="margin-top:20px;position:absolute;background-color:#fff;border-bottom:1px solid #cde;border-left:1px solid #cde;border-right:1px solid #cde;">' +
'<div class="result_list result_list_scrollable">' +
'<ul class="list" style="padding: 0px 0px 3px 0px;margin:0px 0px 0px 0px;">' +
'<li onmouseover="this.style.backgroundColor=\'#91abc4\';this.style.color=\'#fff\';"'+
'onmouseout="this.style.backgroundColor=\'#e9e9e9\'; this.style.color=\'#000\';"'+
'onclick="d_list()" id="noin">';
var lis_end = '</lu></div></div>';
s_json['id'] = [ 1, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
s_json['j'] = ['Крокодил гена','пока','земля','сон','провод',
'магазин','авто','ав','басы','участок',
'перевод','старт','ГИБДД','Пятница','Путин',
'Москва','Санкт-Питербург','клаксон'
];
function activate_select(){
setInterval(function (){
if (document.getElementById('stail').value != oldValue)
{
oldValue = document.getElementById('stail').value;
if(oldValue.length != ''){
// input fool
// функция формирования и проверки массива
document.getElementById('selectwrite').innerHTML = '';
space = search_json(oldValue)
if(space != ''){
document.getElementById('selectwrite').innerHTML = lis_start + lis_new_catalog +'</li>'+ space + lis_end;
}else{
document.getElementById('selectwrite').innerHTML ='';
}
}else{
document.getElementById('selectwrite').innerHTML = '';
space = search_json(oldValue)
document.getElementById('selectwrite').innerHTML = lis_start + lis_input_catalog +'</li>'+ space + lis_end;
}
}
},
10 );
}
// функция для просмотра длины слова
function search_json(slovo)
{
var lis = '';
for(var f = 0; f <= s_json['j'].length; f++)
{
// lis.appendChild(lis);
// document.getElementById('r2').innerHTML = s_json['j'][f];
if( s_json['j'][f] == undefined )
{
}else{
if( slovo.length <= s_json['j'][f].length )
{
if (s_json['j'][f].search(new RegExp( slovo , "gi")) != -1? true : false )
{ // регулярное выражение по поиску совпадений
// регулярное выражение по замене
reps = s_json['j'][f].replace(new RegExp( slovo , "g"), '<em>' + slovo + '</em>') ;
// list['id'] = s_json['id'][f];
lis = lis + '<li onclick="onclick_select_list(\'' + s_json['id'][f] + '\',\'' + s_json['j'][f] + '\')" ' +
'onmouseover="this.style.backgroundColor=\'#6083a5\';this.style.color=\'#fff\';'+
'this.style.borderTop = \'solid #f82525 1px\';this.style.borderBottom = \'solid #f82525 1px\';" '+
'onmouseout="this.style.backgroundColor=\'#fff\'; this.style.color=\'#000\';'+
'this.style.borderTop = \'solid #ffffff 1px\';this.style.borderBottom = \'solid #ffffff 1px\';" value="' + s_json['id'][f] +'">' + reps + '</li>';
}
}
}
}
return lis ;
}
// res(listing);
// проверка
function onclick_select_list(id_value, var_value){
document.getElementById('stail').value = var_value;
document.getElementById('catalog_id').value = id_value;
document.getElementById('selectwrite').innerHTML = '';
}
function onactivate_selec(){
document.getElementById('selectwrite').innerHTML = '';
}
function delete_select_list(){
var selectw = document.getElementById('selectwrite');
if (selectw != ''){
// document.getElementById('selectwrite').innerHTML = '';
}else{
activate_select();
}
}
function d_list(){
document.getElementById('selectwrite').innerHTML = '';
}
<div id="selectinput">
<div style="cursor: pointer; width: 163px;">
<img style="cursor: pointer; width: 9px; height: 20px; border: 1px none; padding: 0px; float: left;" src="/img/left_catalog_theme.gif" alt="|">
<div style="display:inline;float:left;background-image: url('/img/catalog_input.gif');width: 154px; height: 20px;border: 0px; ">
<input onBlur="delete_select_list()" value="" id="stail" onFocus="activate_select()" style="padding: 0px 0px 1px 0px;background-color:#fcfcfc;margin:2px 0px 2px 0px;height: 15px;width: 129px;float: left;border: 0px none;" name="catalog" type="text" size="10">
<input id="catalog_id" value="" style="display:none;" name="catalog_id" type="text">
<div onclick="activate_select()" style="background-repeat: no-repeat;display:inline;float:left;background-image:url('/img/catalog_open_select.gif');width: 25px; height: 20px; ">
</div>
</div>
</div>
</div>
<div id="selectwrite"></div>
Прошу не пинать слишком нагами, так как изучаю JS более недели и то по мере того что необходимо