ajax，显示数据，但在使用搜索时找不到数据

Question

我使用下面的代码来显示国家，当选择任何国家时，我将获得这个国家的地区，目前一切正常，但当我获得地区，并使用div中的搜索无法获得它，因为div是空的，但如果我选择任何地区，我将得到其id的警报，所以如何选择和搜索地区，请参阅屏幕截图，我正在使用jQuery插件https://imgur.com/VbHZOFK Bootstrap选择与搜索- BootstrapSelect在这里的链接https://www.codehim.com/others/jquery-plugin-for-bootstrap-select-with-search-bootstrapselect/我不知道如何找到搜索jquery代码，因为它在jquery文件中的某个地方(太多的文件和代码)

Ajax：

    $(document).on('click','#countrylist li', function(){

        $.ajax({
            url:'/getRegions',
            type: 'GET',
            data: 'country_id='+$(this).data('value'),
            beforeSend: function( xhr )
            {

                Command: toastr["info"]("Uploading Data.....", "Processing")
            },

            statusCode: {
                422: function( result) {
                    console.log(result);
                    $('#error').html(result.responseText);
                    $('#static').modal('show');
                }
            },
            success: function(data){
                toastr.clear();

                var select = $('#regionlist');
                $('#regionlist').html('');
                select.empty(); 

     $(document).on('click', '#regionlist li', function(e) {
   alert($(this).data('value'));
     });

        $.each(data, function(index,element) {
                    select.append("<li data-filter='"+ element.name +"' data-value='"+ element.id +"'>" + element.name + "</li>");
                });
            },
            error:function(data){
            }
        });

    });

Html：

  <div id="bts-ex-5" class="selectpicker" data-clear="true" data-live="true">
 <button data-id="prov" type="button" class="btn btn-lg btn-block btn-default dropdown-toggle">
      <span class="placeholder">Select Region</span>
      <span class="caret"></span>
       </button>

       <div class="dropdown-menu">
       <div class="live-filtering" data-clear="true" data-autocomplete="true" data-keys="true">

      <label class="sr-only" for="input-bts-ex-5">Search in the list</label>

      <div class="search-box">
       <div class="input-group">
          <span class="input-group-addon" id="search-icon5">

          <span class="fa fa-search"></span>
         <a href="#" class="fa fa-times hide filter-clear">
        <span class="sr-only">Clear filter</span></a>
          </span>
        <input type="text" placeholder="Search in the list" id="region_input" class="form-control live-search" aria-describedby="search-icon5" tabindex="1" />

     <div class="list-to-filter">
       <ul class="list-unstyled">
        <li class="optgroup">
         <span class="optgroup-header">List of Regions <span class="subtext"></span></span>
         <ul id="regionlist" class="list-unstyled">
       @if(isset($region))
                @foreach($region as $row)
                    @if(isset($data->region_id))
                        @if($row->id == $data->region_id)
           <li class="filter-item items" data-filter="{{ $row->name }}" data-value="{{ $row->id }}">{{ $row->name }}</li>
      @else
            <li class="filter-item items" data-filter="{{ $row->name }}" data-value="{{ $row->id }}">{{ $row->name }}</li>
  @endif
                    @else
            <li class="filter-item items" data-filter="{{ $row->name }}" data-value="{{ $row->id }}">{{ $row->name }}</li>

      @endif
        @endforeach
            @endif 
   </ul>
      </li>
          </ul>

     <div class="no-search-results">
     <div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
     </div>
      </div>
    </div>
         </div>
           </div>

Answer 1

我在这里找到了解决方案:在成功的jquery中：

  $("#regionlistresult").html(data.regionlist);

在控制器中：

    public function getRegions(Request $request)
  {

 $region=Region::getRegionsByCountryID($request->input('country_id'));

   $regionlist = view("include.regionlist",compact('region'))->render();

   return response()->json([
  'regionlist' => $regionlist
 ]);