基於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 
});