Форум

feoalter7 · #1 (**permalink**) 03.09.2014, 15:27

Доброго времени суток господа!
Введение.
Имеем несколько(2 например) полей для ввода. Вот таких

<input class="search_show_list" type="text" tabindex="1" autocomplete="off">

Эти поля генерируются скриптом в цикле.
Под каждым таким input'ом, есть список ul, вот такой

<ul class="list_modules">
   <li class="search_item" data-value="1">Вася</li>
   <li class="search_item" data-value="2">Петя</li>
</ul>

Эти списки вместе с input'ом создаются скриптом

Задача.
При клике на любой из li списка, содержимое этого li помещалось бы в его (который выше) input.

Варианты.
Сразу хочу сказать что вариант типа подниматься по родителям, не подходит. Хотелось бы универсальности, а то вдруг возникнет необходимость в еще одном узле, сами понимаете цепочка из родителей работать перестанет.
Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM. Cчитаю решение не очень (может ошибаюсь).

Еще вариант. нашел вот что http://harvesthq.github.io/chosen/. посмотрел что у них все классы одинаковые, нет привязки к DOM, но при этом при клике по списку, содержимое попадает куда надо. Смотрел их файл, там все сделано прототипами.

Может кто подскажет как правильней и универсальней решить данную задачу?

Aetae · #2 (**permalink**) 03.09.2014, 16:36

Всё это должно связываться на момент генерации в js объекте.

ksa · #3 (**permalink**) 03.09.2014, 16:37

Как вариант... "Без родителей"...

<!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'>
</style>
<script type='text/javascript'>
$(function (){
	$('.search_item').click(function (){
		var val=$(this).data('value');
		$(this.parentNode).prevAll('.search_show_list').eq(0).val(val);
	});
});
</script>
</head>
<body>
<input class="search_show_list" type="text" tabindex="1" autocomplete="off">
<p>test 1</p>
<ul class="list_modules">
   <li class="search_item" data-value="1">Вася</li>
   <li class="search_item" data-value="2">Петя</li>
</ul>
<input class="search_show_list" type="text" tabindex="2" autocomplete="off">
<p>test 2</p>
<ul class="list_modules">
   <li class="search_item" data-value="1">Вася</li>
   <li class="search_item" data-value="2">Петя</li>
</ul>

</body>
</html>

feoalter7 · #4 (**permalink**) 03.09.2014, 16:42

Сообщение от Aetae

Всё это должно связываться на момент генерации в js объекте.

А вот как между ними установить связь, без DOM?

ksa · #5 (**permalink**) 03.09.2014, 16:44

Сообщение от feoalter7

А вот как между ними установить связь, без DOM?

Как вариант:
- инпутам генерть уникальные ИД
- списку прописывать тот ИД в атрибут

feoalter7 · #6 (**permalink**) 03.09.2014, 16:47

Сообщение от 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'>
</style>
<script type='text/javascript'>
$(function (){
	$('.search_item').click(function (){
		var val=$(this).data('value');
		$(this.parentNode).prevAll('.search_show_list').eq(0).val(val);
	});
});
</script>
</head>
<body>
<input class="search_show_list" type="text" tabindex="1" autocomplete="off">
<p>test 1</p>
<ul class="list_modules">
   <li class="search_item" data-value="1">Вася</li>
   <li class="search_item" data-value="2">Петя</li>
</ul>
<input class="search_show_list" type="text" tabindex="2" autocomplete="off">
<p>test 2</p>
<ul class="list_modules">
   <li class="search_item" data-value="1">Вася</li>
   <li class="search_item" data-value="2">Петя</li>
</ul>

</body>
</html>

В целом да, а как это перенести в чистый JS теперь..

feoalter7 · #7 (**permalink**) 03.09.2014, 16:48

Сообщение от ksa

Как вариант:
- инпутам генерть уникальные ИД
- списку прописывать тот ИД в атрибут

Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM.

Я писал про это..так не пойдет.

ksa · #8 (**permalink**) 03.09.2014, 16:54

Сообщение от feoalter7

Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM.

У нас разное понимание термина "привязка к ДОМ"...

ksa · #9 (**permalink**) 03.09.2014, 16:55

Сообщение от feoalter7

а как это перенести в чистый JS теперь..

1000р за час и нет проблем!

feoalter7 · #10 (**permalink**) 03.09.2014, 17:01

Сообщение от ksa

1000р за час и нет проблем!

Еще часок и будет готово!) Спасибо)

Форум

Справочник

Discord чат

Курсы javascript