使用 bulma css 显示浮动框搜索结果

Question

我正在尝试使用 bulma 显示搜索结果框，但到目前为止没有任何效果，我已经尝试过像“is-clearfix”这样的 bulma 助手，但它仍然没有显示，我试过了 select 和选项，在我单击之前仍然不显示，甚至尝试了 honorables 但无法让它工作，有没有办法使用 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>';

提前致谢。

Answer 1

这就是我得出的结论，希望对您有所帮助：-

在你的控制器中：-

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

使用 bulma css 显示浮动框搜索结果

Display floating box search result with bulma css

css

bulma