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