基于Laravel中的文本框自动完成的动态下拉选项

Question

我正在使用Laravel，Jquery & MaterializeCSS。我的要求是基于文本输入自动完成来填充表单中的下拉选项。我正在使用一个文本自动完成源和另一个源来填充下拉菜单。它是一个多选。在从自动填充填充inoput字段后，不会填充下拉列表。如果我们在下拉菜单中显示它没有显示任何内容，但是当我选择默认的时候，它的显示值将显示在来自源的图像中。

After autocpmplete of text field

When selected option then its showing the city value

请解决这个问题有所帮助。这是我的代码。

HTML：

<div class="input-field col s12 m12 l4"> 
    {!! Form::label('company_w', 'Company') !!} 
    {!! Form::text('company_w', null, ['class' => 'validate']) !!} 
    <input id="company_id" name="company_id" type="hidden" /> 
</div> 

<div class="input-field col s12 m6 l4"> 

     <select id="city_id" name="city_id" multiple> 
     <option value="">--</option> 
     </select> 
</div> 

的JScript：

 $(function() { 
     $("#company_w").autocomplete({ 
      source: "companies/autocompletecompanies", 
      minLength: 3, 
      select: function (event, ui) { 
       $('#company_w').val(ui.item.value); 
       $('#company_id').val(ui.item.id); 

       $.get("/companies/autocompletecompanycities", 
         {company_id: ui.item.id}, 
         function (data, status) { 

          var model = $('#city_id'); 
          model.empty(); 
          $.each(data, function (index, element) { 
           model.append("<option value='"+ element.id +"'>" + element.name + "</option>"); 

          }); 


         }); 
      } 


     }); 

    }); 

Controlelr：

public function autocompleteCompanies(){ 
    $term = Input::get('term'); 

    $results = array(); 

    $queries = Companies::orderBy('name', 'asc') 
     ->where('name', 'LIKE', $term.'%') 
     ->take(5)->get(); 

    foreach ($queries as $query) 
    { 
     $results[] = [ 'id' => $query->id, 'value' => $query->name ]; 
    } 
    return Response::json($results); 
} 

public function autocompleteCompanycities(){ 
    $term = Input::get('company_id'); 

    $cities = array(); 

    $company = Companies::findOrfail($term); 

    $address = Addresses::with('cities') 
      ->where('company_id', '=', $company->id) 
      ->get(); 

    foreach($address as $addrs) 
    { 

     $cities[] = [ 'id' => $addrs->cities->id, 'name' => $addrs->cities->name]; 
    } 
    return Response::json($cities); 
} 

Answer 1

我认为你需要重新初始化与Materialize.css脚本的选择框，在读here更新/销毁选择 par阿格拉夫。

所以试着做这个操作。

$.get("/companies/autocompletecompanycities", 
     {company_id: ui.item.id}, 
     function (data, status) { 

      var model = $('#city_id'); 
      model.empty(); 
      $.each(data, function (index, element) { 
       model.append("<option value='"+ element.id +"'>" + element.name + "</option>"); 

      }); 

      model.material_select(); //refresh the dropdown 
});