Как сделать живой поиск из select2?

Question

[magic_healthy_hair]

Здравствуйте. Возникла такая ситуация, есть уже готовый select с городами, как сделать из него живой поиск на select 2?
Такой как у них на этой странице

https://select2.org/dropdown#dropdown-placement

Сейчас появляется просто input рядом с select и под ним высвечивается весь список

Вот кусок к которому хотелось бы это сделать

<select name="{$v.depending.caption1}" class="mselect catselect" id="{$v.depending.caption1}" onchange="selDepending(1, '{$v.depending.caption1}', '{$v.depending.caption2}', '{$v.depending.id}', {if isset($category) && $category}{$category}{else}0{/if}, {if $v.other_val}1{else}0{/if}, '{$lng.general.other}', {if $v.all_val}1{else}0{/if}, '{$lng.general.all}', '{$live_site}', '')" {if in_array($v.depending.caption1, $gmaps_unique)}onblur="autoLocator_{$gmaps_fields[$v.depending.caption1]}();"{/if} {if isset($edit) && $edit && !$v.editable}readonly{/if}>
		<option value="">{$v.depending.top_str1}</option>
		{if $v.other_val}<option value="-1" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1] && !in_array($tmp[$v.depending.caption1], $v.depending.elements)}selected="selected"{/if}>{$lng.general.other}</option>{/if}
		{if $v.all_val}<option value="all" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]=="all"}selected="selected"{/if}>{$lng.general.all}</option>{/if}
		{foreach from=$v.depending.elements item=t}
		<option value="{$t.name}" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]==$t.name} selected="selected"{/if}>{$t.name}</option>
		{/foreach}
	</select>

Answer 1

[Максим Тимофеев]

ответ у них же на сайте:
https://select2.org/data-sources/ajax
вкратце - данные получаются по ajax

Comments

[magic_healthy_hair]

Вы не могли бы примерно показать как это реализовать в данном случае?

[Максим Тимофеев]

magic_healthy_hair, в каком данном? Чем не устраивают примеры в документации?
Вот еще примеры и демки: select2.github.io/select2

[magic_healthy_hair]

Вот как этот кусок

<select name="{$v.depending.caption1}" class="mselect catselect" id="{$v.depending.caption1}" onchange="selDepending(1, '{$v.depending.caption1}', '{$v.depending.caption2}', '{$v.depending.id}', {if isset($category) && $category}{$category}{else}0{/if}, {if $v.other_val}1{else}0{/if}, '{$lng.general.other}', {if $v.all_val}1{else}0{/if}, '{$lng.general.all}', '{$live_site}', '')" {if in_array($v.depending.caption1, $gmaps_unique)}onblur="autoLocator_{$gmaps_fields[$v.depending.caption1]}();"{/if} {if isset($edit) && $edit && !$v.editable}readonly{/if}>
    <option value="">{$v.depending.top_str1}</option>
    {if $v.other_val}<option value="-1" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1] && !in_array($tmp[$v.depending.caption1], $v.depending.elements)}selected="selected"{/if}>{$lng.general.other}</option>{/if}
    {if $v.all_val}<option value="all" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]=="all"}selected="selected"{/if}>{$lng.general.all}</option>{/if}
    {foreach from=$v.depending.elements item=t}
    <option value="{$t.name}" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]==$t.name} selected="selected"{/if}>{$t.name}</option>
    {/foreach}
  </select>

Сделать таким как у них здесь

https://select2.org/dropdown#dropdown-placement

Просто у меня почему-то появляется input рядом с select и весь список регионов
вот скрин

[Максим Тимофеев]

magic_healthy_hair, У них там js, где Ваш js? Вы показываете html с каким-то шаблонизатором, видимо SMARTY.
Давайте с аналогии зайдем:
Вы показываете на холодильник и говорите, что хотите такой же, а потом показываете свой чугунный шлем.
Я так понимаю стоит немного почитать про js, хотя бы 3 главы первые. Вы просите дичь какую-то.

[magic_healthy_hair]

прикрутил chosen , но теперь получается так, у меня 2 поля select, одно регион, второе город, после выбора региона из первого select , подгружаются города во второй select, но почему-то первый select работает так как надо , т.е начинаешь вводить регион , выбираешь из списка, а вот второй select с городами уже не работает
вот код
что тут не так?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://.site/auto/chosen.jquery.js"></script>
	<script>
	$('.chosen-select').chosen();
	</script>

<select name="{$v.depending.caption1}" class="chosen-select" id="{$v.depending.caption1}" onchange="selDepending(1, '{$v.depending.caption1}', '{$v.depending.caption2}', '{$v.depending.id}', {if isset($category) && $category}{$category}{else}0{/if}, {if $v.other_val}1{else}0{/if}, '{$lng.general.other}', {if $v.all_val}1{else}0{/if}, '{$lng.general.all}', '{$live_site}', '')" {if in_array($v.depending.caption1, $gmaps_unique)}onblur="autoLocator_{$gmaps_fields[$v.depending.caption1]}();"{/if} {if isset($edit) && $edit && !$v.editable}readonly{/if}>
		<option value="">{$v.depending.top_str1}</option>
		{if $v.other_val}<option value="-1" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1] && !in_array($tmp[$v.depending.caption1], $v.depending.elements)}selected="selected"{/if}>{$lng.general.other}</option>{/if}
		{if $v.all_val}<option value="all" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]=="all"}selected="selected"{/if}>{$lng.general.all}</option>{/if}
		{foreach from=$v.depending.elements item=t}
		<option value="{$t.name}" {if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1]==$t.name} selected="selected"{/if}>{$t.name}</option>
		{/foreach}
	</select>
	<input type="hidden" name="dep_id_{$v.depending.caption1}" id="dep_id_{$v.depending.caption1}" value="" />
	{if $v.other_val}
	{if isset($tmp[$v.depending.caption1]) && $tmp[$v.depending.caption1] && !in_array($tmp[$v.depending.caption1], $v.depending.elements)}
	<span id="span_{$v.depending.caption1}_other_val">&nbsp;<input type="text" name="{$v.depending.caption1}_other_val" value="{$tmp[$v.depending.caption1]}"></span>
	{else}
	<span id="span_{$v.depending.caption1}_other_val" style="display: none;">&nbsp;<input type="text" name="{$v.depending.caption1}_other_val"/></span>
	{/if}
	{/if}
	
	</div>{* end fel *}

	<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' class="chosen-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>
	<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}