Услуги профессионального Битрикс-программиста

Autocomplete Widget jquery


https://api.jqueryui.com/autocomplete/

подключить в шаблоне
$APPLICATION->AddHeadScript('/bitrix/templates/.default/js/jquery.min.js');
$APPLICATION->AddHeadScript('/bitrix/templates/.default/js/jquery-ui.min.js');
$APPLICATION->SetAdditionalCSS("/bitrix/templates/.default/css/jquery-ui.css");

поиск и заполнение select (делала для вывода сквозной аналитики, шаблон компонента crm.tracking.entity.details)
<script> 
   // задаем массив в качестве источника слов для автозаполнения
   availableTags = [
      <?foreach ($arResult['SOURCES'] as $keyS =>$source):?>
          {
             label:"<?=htmlspecialcharsbx($source['NAME'])?>", 
             value:"<?=htmlspecialcharsbx($source['NAME'])?>",
             id:"<?=htmlspecialcharsbx($source['ID'])?>"
          },
      <?endforeach;?>    
   ];    
   
   $('#<?=htmlspecialcharsbx($containerId)?>_search').autocomplete({
      source: availableTags,
      select: function( event, ui ) {                     
         $('select[name=<?=$arParams['SOURCE_INPUT_NAME']?>').val(ui.item.id);
         setTimeout(function(){
            $('#<?=htmlspecialcharsbx($containerId)?>_search').val('');   
         },100);         
      }
   });
</script>

это кастомизация catalog.smart.filter
case "P"://DROPDOWN

<?

$valt = "";
foreach ($arItem["VALUES"] as $val => $ar){
   if ($ar["CHECKED"]){
      $valt = $ar["VALUE"];
      $checkedItemExist = true;
   }
}
?>
<input id="tags<?=$arItem["ID"]?>" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="<?=$valt?>">
<?
   $availableTags = array();
   foreach ($arItem["VALUES"] as $val => $ar):
      $availableTags[] = array(
         "label" => $ar["VALUE"],
         "value" => $ar["VALUE"],
         "id" =>CUtil::JSEscape($ar["CONTROL_ID"])
      );      
                      
   endforeach;
   $arJsParamsAutocomplete[] = array(
      "id" => "tags".$arItem["ID"],
      "source" => $availableTags,
      "input_name" => "arrFilter_".$arItem["ID"],
      "all_values_input" => CUtil::JSEscape("all_".$arCur["CONTROL_ID"]),

   );   
?>
js
$(window).on('load',function(){
      setTimeout(function(){
         var w = window;
           var d =  document;      
           // добавляем скрипт
           var s=d.createElement('script');
           s.src='<?=SITE_TEMPLATE_PATH?>/js/jquery-ui.js';
           s.onload =function(){         
            var arParamsAutocomplete = <?=CUtil::PhpToJSObject($arJsParamsAutocomplete)?>;      
            for (var i = 0; i < arParamsAutocomplete.length; i++) {
               arAutocompl = arParamsAutocomplete[i];
               $( "#"+arAutocompl.id ).autocomplete({
                  source: arAutocompl.source,
                  select:function(event, ui) {
                     if((ui.item != null) && (typeof ui.item != undefined)){
                        if(ui.item.id != ""){
                           $("input[name='"+arAutocompl.inputName+"']").attr("checked","");
                           $('#'+ui.item.id).attr("checked","checked");               
                           smartFilter.selectDropDownItem($("label[for='"+ui.item.id+"']")[0], ui.item.id);
                        }
                     }                                             
                  },
                  change: function(event, ui) {                           
                     
                     if((ui.item != null) && (typeof ui.item != undefined)){
                        
                     }
                     else{
                        $("input[name='"+arAutocompl.inputName+"']").attr("checked","");         
                        $("#"+arAutocompl.all_values_input).attr("checked","checked");
                        smartFilter.selectDropDownItem($("label[for='"+arAutocompl.all_values_input+"']")[0], arAutocompl.all_values_input);                                       
                     }
                  }

               });

            }
         };

           // добавляем стили
         var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h); 
           var l=d.createElement('link');
           l.type="text/css"; l.rel="stylesheet";l.href='<?=SITE_TEMPLATE_PATH?>/css/jqueryui.custom.css';
           h=d.getElementsByTagName('head')[0];h.appendChild(l);
      },2000); 
   });