Javascript-форум - Определить куда вставлять содержимое по клику

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Определить куда вставлять содержимое по клику (https://javascript.ru/forum/events/49922-opredelit-kuda-vstavlyat-soderzhimoe-po-kliku.html)

Определить куда вставлять содержимое по клику

Доброго времени суток господа!
Введение.
Имеем несколько(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, но при этом при клике по списку, содержимое попадает куда надо. Смотрел их файл, там все сделано прототипами.

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

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

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

<!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>

Цитата:

Сообщение от Aetae (Сообщение 328764)

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

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

Цитата:

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

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

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

Цитата:

Сообщение от ksa (Сообщение 328765)

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

<!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 теперь..

Цитата:

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

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

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

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

Цитата:

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

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

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

Цитата:

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

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

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

Цитата:

Сообщение от ksa (Сообщение 328775)

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

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