How to attach select2 to smarty?

Question

JavaScript

Hello, can anyone tell me how to properly tie select2 to smarty?

The template looks like this

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

I don’t quite understand where and what to substitute so that the values ​​\u200b\u200bdo not appear in a hundred in the list, but are displayed, as in a search, when you start entering the first letters. Or is it still not possible to do it here?

I tried 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>

But, 1 - all js stop working, so I insert the script into {literal} in the middle of the page, because the body tag in another file in which this script is not needed, it is needed only in one file.

2. It does not work for some reason in this particular case, on a regular html page the same script works

Maybe someone has come across and understands what's what

Answer 1

Read the documentation for smart since you have to use it
https://www.smarty.net/docsv2/ru/language.function...
there is html_options there.
then see that the html code is assembled in the correct form.
And only then connect to the page chosen
When inserting javascript into a template, you can do without framing it in a literal.
To do this, you need to carefully work with curly braces.
space { space , since the letter must not stick to space }