Как прикрутить select2 к smarty?

Question

[viktorross]

Здравствуйте, кто-нибудь может подсказать как правильно прикрутить select2 к smarty?

Шаблон выглядит вот так

<div class="fel">
	<label for="{$v.depending.caption2}">{$v.depending.name2}{if $v.depending.required2==1}<span class="mandatory"> *</span>{/if}{if $v.info_message}&nbsp;<a href="javascript:;" class="info_icon tooltip" title="{$v.info_message}" >i</a>{/if}</label>

	<select disabled='disabled' name="{$v.depending.caption2}" id="{$v.depending.caption2}" {if $v.depending.no>2}onchange="selDepending(2, '{$v.depending.caption2}', '{$v.depending.caption3}', '{$v.depending.id}', 0, {if $v.other_val}1{else}0{/if}, '{$lng.general.other}', {if $v.all_val}1{else}0{/if}, '{$lng.general.all}', '{$live_site}', 'dep_id_{$v.depending.caption1}')"{else}{if $v.other_val}onchange="checkOther(this.form.{$v.depending.caption2}, '{$v.depending.caption2}')"{/if}{/if} {if in_array($v.depending.caption2, $gmaps_unique)}onblur="autoLocator_{$gmaps_fields[$v.depending.caption2]}();"{/if} >
		<option value="">{$v.depending.top_str2}</option>
	</select>
	<input type="hidden" name="dep_id_{$v.depending.caption2}" id="dep_id_{$v.depending.caption2}" value="" />
	{if $v.other_val}
	<span id="span_{$v.depending.caption2}_other_val" style="margin-left: 10px; display: none;">&nbsp;
	<input type="text" name="{$v.depending.caption2}_other_val" id="{$v.depending.caption2}_other_val" value="{if isset($tmp[$v.depending.caption2])}{$tmp[$v.depending.caption2]}{/if}"/>
	</span>
	{/if}

{if $v.depending.no>=3}
	</div>

Не совсем понимаю куда и что подставить чтобы значения не появлялись сотней в список, а высвечивались, как в поиске, когда начинаешь вводить первые буквы. Или все таки сюда не получится это сделать?

Я пробовал chosen

<select disabled='disabled' class="chzn-select"  name="{$v.depending.caption2}" id="{$v.depending.caption2}" {if $v.depending.no>2}onchange="selDepending(2, '{$v.depending.caption2}', '{$v.depending.caption3}', '{$v.depending.id}', 0, {if $v.other_val}1{else}0{/if}, '{$lng.general.other}', {if $v.all_val}1{else}0{/if}, '{$lng.general.all}', '{$live_site}', 'dep_id_{$v.depending.caption1}')"{else}{if $v.other_val}onchange="checkOther(this.form.{$v.depending.caption2}, '{$v.depending.caption2}')"{/if}{/if} {if in_array($v.depending.caption2, $gmaps_unique)}onblur="autoLocator_{$gmaps_fields[$v.depending.caption2]}();"{/if} >
		<option value="">{$v.depending.top_str2}</option>
	</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://site.ru/autot/chosen.jquery.js"></script>
  <script>
  $(".chzn-select").chosen();
  </script>

Но, 1 - перестают работать все js так я вставляю скрипт в {literal} посреди страницы, т.к тег body в другом файле в котором этот скрипт не нужен, он нужен только в одном файле.

2. Он не работает почему-то именно в данном случае, на обычной html странице тот же самый скрипт работает

Может быть кто-то сталкивался и понимает что к чему

Answer 1

[Олег]

Почитайте документацию на смарти раз уж приходиться его использовать
https://www.smarty.net/docsv2/ru/language.function...
есть там html_options.

потом смотрите , что html код собрался в правильном виде.
А уж потом подключайте к странице chosen

При вставке javascript в шаблон можно обойтись и без обрамления его в литерал.
Для этого нужно внимательно работать с фигурными скобками.
пробел { пробел , так как буква не должна прилипать к пробел }