Динамические варианты выпадания на основе автозаполнения текстового поля в 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 на Обновление/уничтожение Выберите шт. Аграф.

Так что попробуйте выполнить эту операцию.

$.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 
});