Search Machine MODX

gistfile1.txt

<div class="search_wrapper" style="display:none;z-index:100000;position:absolute;width:80%;height:70%;border:1px solid #ddd;left:10%;top:10%;background-color:#ddd;border-radius: 3px 3px 3px 3px;">
          <div class="search_wrapper_2" style="position: absolute; width:98%;height:90%;top:5%;left:1%;background-color:white;">
              <span style="position: absolute;top:-5%;">Поиск</span>
              <div class="search_line" style="position: absolute;width: 98%;height:30px;left:0.8%;top:20px;">
                  <input type="text" class="search_input" style="height:25px;width:100%;border: 2px solid #555">
                  
              </div>
              <div class="search_content" style="position: absolute;width: 98%;height:80%;left:0.8%;top:60px;overflow:auto;">
                  <div style=" " class="how">
                  [[!pdoResources?
                &parents=`18`
                &tpl=`pdoTpl_works_houses`
                &limit=`0`
                &includeTVs = `havePhoto`
                &sortby = `pagetitle`
                &sortdir = `ASC`
              ]]
              </div>
              <div style="" class="how">
                  [[!pdoResources?
                &parents=`28`
                &tpl=`pdoTpl_works_shops`
                &limit=`0`
                &includeTVs = `havePhoto`
                &sortby = `pagetitle`
                &sortdir = `ASC`
              ]]
              </div>
              <div style="display:none;" class="how">
                  [[!pdoResources?
                &parents=`32`
                &tpl=`pdoTpl_works_offices`
                &limit=`0`
                &includeTVs = `havePhoto`
                &sortby = `pagetitle`
                &sortdir = `ASC`
              ]]
              </div>
              <div style="" class="how">
                  [[!pdoResources?
                &parents=`36`
                &limit=`0`
                &tpl=`pdoTpl_works_apartmens`
                &includeTVs = `havePhoto`
                &sortby = `pagetitle`
                &sortdir = `ASC`
              ]]
              </div>
              <div style="" class="how">
                  [[!pdoResources?
                &parents=`40`
                &limit=`0`
                &tpl=`pdoTpl_works_clubs`
                &includeTVs = `havePhoto`
                &sortby = `pagetitle`
                &sortdir = `ASC`
              ]]
              </div>
              </div>
          </div>
          <div class="search_button" style="cursor:pointer;padding-top:13px;font-size:13px;text-align:center;position:absolute;bottom:9%;width:8%;height:30px;border:1px solid #aaa;border-radius; 2px 2px 2px 2px;background-color: #ddd;left:46%;">
              Закрыть
          </div>
          <style>
              .work_list a{
                  text-decoration:none !important;
                  color: #444;
                  text-transform: uppercase;
              }
              .target{
                  position: absolute;
                  bottom:-1000;
                  //display:none;
              }
              .search_content::-webkit-scrollbar {
                  width: 0;
              }
              .search_button:hover{
                  background-color:#bbb !important;
              }
          </style>
          <script>
          
              $('.search').css('cursor','pointer');
              $('.work_list').css('width','300px');
              $('.work_list_icon').hide();
              $('.work_list div:nth-child(2) a').addClass('title_temp');
              $('.title_temp').hide();
              //console.log($('.title_temp'));
              
              $( ".search" ).click(function() {
                  $( ".search_wrapper" ).show( 350, function() {
                  });
              });
              $( ".search_button" ).click(function() {
                  $( ".search_wrapper" ).hide( 350, function() {
                  });
              });
                      
              
              $('.search_input').on('input', function() {
              
              var arr = $('.title_temp');
              for(i=0;i<arr.length;i++){
                  arr[i] = $('.title_temp').eq(i).text();
              }
                  
                  $('.title_temp').hide();
                  var text = $('.search_input').val();
                  //console.log(text,arr[1]);
                  //$('.title_temp').eq(0).show();
                  
                  for(i=0;i<arr.length;i++)
                  {
                      
                      text2 = arr[i].toUpperCase();
                      text3 = arr[i].toLowerCase();
                      if((arr[i].indexOf(text) == -1)&&(text2.indexOf(text) == -1)&&(text3.indexOf(text) == -1)){
                         //$('.title_temp').eq(i).parent().hide();
                         $('.title_temp').eq(i).parent().parent().addClass('target');
                         $('.title_temp').eq(i).parent().addClass('target');
                         $('.title_temp').eq(i).addClass('target');
                         $('.title_temp').eq(i).hide();
                         
                         
                      }
                      if((arr[i].indexOf(text) > -1)||(text2.indexOf(text) > -1)||(text3.indexOf(text) > -1)){
                         //$('.title_temp').eq(i).parent().show();
                         $('.title_temp').eq(i).show();
                         $('.title_temp').eq(i).parent().parent().removeClass('target');
                         $('.title_temp').eq(i).parent().removeClass('target');
                         $('.title_temp').eq(i).addClass('target');
                      }
                  }
                  $('.title_temp').css('z-index','11122221');
              });
          </script>
      </div>