Отображение результатов поиска с плавающей рамкой с помощью bulma css

Я пытаюсь отобразить окно результатов поиска с помощью bulma, и пока у меня ничего не работает, я пробовал помощники bulma, такие как "is-clearfix", но он все еще не отображается, я пробовал выбрать и параметры, все еще не работает отображать до тех пор, пока я не нажму, даже пробовал благородные, но не смог заставить его работать, есть ли способ сделать это с помощью bulma css?

мой код

начиная с html: -

 <div class="">
    <input type="text" name="country_name" id="country_name" class="input" placeholder="Enter Country Name" />
    <div id="countryList">
    </div>
   </div>

Часть Ajax: -

$.ajax({
          url:"{{ route('autocomplete.fetch') }}",
          method:"POST",
          data:{query:query, _token:_token},
          success:function(data){
           $('#countryList').fadeIn();  
                    $('#countryList').html(data);
          }
         });

часть php: -

$output = '<ul class="dropdown-menu" style="z-index:4000 !important; position:absolute">';
      foreach($data as $row)
      {
       $output .= '
       <li><a href="#">'.$row->name.'</a></li>
       ';
      }
      $output .= '</ul>';

заранее спасибо.


css bulma
person Mr Mohamed    schedule 20.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот что я сделал, надеюсь, это поможет: -

в вашем контроллере: -

$output .= '
       <li><a href="'.url("manage/users").'/'. $row->id .'" class="input" style="border:2px; width:400px;">'.$row->name.'</a></li>
       ';
      }
      $output .= '</ul>';

и на ваш взгляд: -

<div class="">
    <input type="text" name="country_name" id="country_name" class="input" placeholder="Enter Country Name" />
    <div id="countryList" style="position:relative; width:100px;" > 
    </div>
   </div>
person Mohamed Gabr    schedule 22.11.2018