15.01.2014, 15:49
|
|
Новичок на форуме
|
|
Регистрация: 15.01.2014
Сообщений: 5
|
|
|
Событие click срабатывает только при повторном нажатии (через ON)
вкратце, при вводе в input названия города всплывает окошко с подсказкой доступных городов, соответственно при клике на подсказку выбранный город записывается в input. Все работает, только после 2 клика по подсказке
<style>
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<div class="input_form"><input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var town_from = new Array(
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
)
$(document).ready(function(){
$("#from").on("keyup change", function(){
var str=$(this).val().toLowerCase();
var from_result='';
$('#from_help').empty();
if ($(this).val() == '') {from_result ='<div class="nothing">ничего не найдено</div>';}
else
{
var count=0;
for (i in town_from)
{
if (count < 10)
{
var temp=town_from[i].toLowerCase();
if (temp.indexOf(str)==0)
{
$('#from_help').append('<div class="add" >'+town_from[i]+'</div>');
count++;
}
}
}
if (count < 10)
{
for (i in town_from)
{
if (count < 10)
{
var temp=town_from[i].toLowerCase();
if (temp.indexOf(str)!=-1)
{
$('#from_help').append('<div class="add" >'+town_from[i]+'</div>');
count++;
}
}
}
}
if (count==0) {$('#from_help').append('<div class="nothing">ничего не найдено</div>');}
}
})
})
$(document).ready(function(){
$('#from_help').on('click','.add',function () {
$("#from").val($(this).text())
$('#from_help').empty();
alert ('working???');
});
})
// добавление полей
</script>
С чем это связано ?
|
|
15.01.2014, 16:27
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от loko
|
|
С чем это связано ?
|
Анализировать нужно малое, так лучше видны твои проблемы 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script type="text/javascript">
$(document).ready(function(){
//$("#from").on("keyup",function(){
$("#from").on("keyup change",function(){
for (var i=0; i<3; i++) {
$('#from_help').append('<div class="add">Item '+i+'</div>');
};
});
});
$(document).ready(function(){
$('#from_help').on('click','.add',function () {
$("#from").val($(this).text())
$('#from_help').empty();
alert ('working???');
});
})
// добавление полей
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
|
|
15.01.2014, 16:39
|
|
Новичок на форуме
|
|
Регистрация: 15.01.2014
Сообщений: 5
|
|
Сообщение от ksa
|
Анализировать нужно малое, так лучше видны твои проблемы
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script type="text/javascript">
$(document).ready(function(){
//$("#from").on("keyup",function(){
$("#from").on("keyup change",function(){
for (var i=0; i<3; i++) {
$('#from_help').append('<div class="add">Item '+i+'</div>');
};
});
});
$(document).ready(function(){
$('#from_help').on('click','.add',function () {
$("#from").val($(this).text())
$('#from_help').empty();
alert ('working???');
});
})
// добавление полей
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
|
работает, не спорю... но разница только в алгоритме добавления содержимого... но как оно влияет если в результате добавляется один и тот же код ???
|
|
15.01.2014, 16:52
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
loko, ты видишь на моем примере, что у тебя дважды идет добавление городов?
|
|
15.01.2014, 17:06
|
|
Новичок на форуме
|
|
Регистрация: 15.01.2014
Сообщений: 5
|
|
|
Сообщение от ksa
|
|
loko, ты видишь на моем примере, что у тебя дважды идет добавление городов?
|
тут даже не в двойной подборке городов дело, и не в алгоритме, а в простом использовании if - else конструкции ...
$(document).ready(function(){
//$("#from").on("keyup",function(){
$("#from").on("keyup change",function(){
var str=$(this).val().toLowerCase();
var from_result='';
$('#from_help').empty();
var test_bol=false;
if (test_bol) {$('#from_help').append('<div class="add">ничего не найдено</div>');}
else
{
for (var i=0; i<10; i++) {
$('#from_help').append('<div class="add">Item '+i+'</div>');
};
};
});
});
- уже работает в 2 клика ... Так с чем это связано ? Это баг jQuery ? |
|
15.01.2014, 17:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
автодополнение
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script>
$(document).ready(function () {
function like(str) {
var town_from = [
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
],
html = '',
str = new RegExp("^" + str, "i");
for (var i = 0; i < town_from.length; i++) {
if (str.test(town_from[i])) html += '<div class="add">' + town_from[i] + '</div>'
}
return html
}
$("#from").on("input", function () {
var val = this.value;
$('#from_help').html(val.length ? like(val) : '')
});
$('#from_help').on('click', '.add', function () {
$("#from").val($(this).text())
$('#from_help').html('');
});
})
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
Последний раз редактировалось рони, 15.01.2014 в 17:48.
|
|
15.01.2014, 18:00
|
|
Новичок на форуме
|
|
Регистрация: 15.01.2014
Сообщений: 5
|
|
|
Сообщение от рони
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script>
$(document).ready(function () {
function like(str) {
var town_from = [
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
],
html = '',
str = new RegExp("^" + str, "i");
for (var i = 0; i < town_from.length; i++) {
if (str.test(town_from[i])) html += '<div class="add">' + town_from[i] + '</div>'
}
return html
}
$("#from").on("input", function () {
var val = this.value;
$('#from_help').html(val.length ? like(val) : '')
});
$('#from_help').on('click', '.add', function () {
$("#from").val($(this).text())
$('#from_help').html('');
});
})
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
|
Спасибо, буду копать в сторону регулярных выражений.... Но почему все таки мой код не срабатывает с 1 раза ? Это баг jQuery или у меня касяк в коде ?
|
|
15.01.2014, 22:05
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от loko
|
|
Но почему все таки мой код не срабатывает с 1 раза ? Это баг jQuery или у меня касяк в коде ?
|
Ну все ведь показал в своем примере... Убери событие change у инпута и все будет срабатывать с одного клика! |
|
16.01.2014, 10:35
|
|
Новичок на форуме
|
|
Регистрация: 15.01.2014
Сообщений: 5
|
|
|
Всем спасибо, разобрался
|
|
|
|
