How can I use dynamic data in Materialize autocomplete?

Question

I want to use the data I get from the database when the key is pressed. I tried this but it didnt work.

$('#QTag').keyup(function (event) {
        let tags = [];
            $.ajax({
                type: 'POST',
                url: '/tryauto',
                data: {
                    'key': $(this).val()
                },
                success: function (dataDB) {
                    $.each(dataDB,function (index,value) {
                        tags.push(value);
                    });
                    $('input.autocomplete').autocomplete({
                        data: tags
                    });
                }
            });
    });

I also tried $('input.autocomplete').autocomplete('updateData',tags); this but it didnt work too.

-

This is my Laravel Controller

public function denemeauto(Request $request){
    $tags = $request->get('key');
    return DB::table('tags')->where('tag_title', 'LIKE', $tags . '%')->get();
}

Answer 1

Okay, here is my initial try at helping fix this. https://codepen.io/tuffant21/pen/KKpBapd One of the first things I noticed is that you're using an array for the autocomplete. Note that autocomplete expects an object, not an array.

Second, you need to initialize the autocomplete on page load. Then update the data object in the instance using instance.options.data. The $('#QTag').keyup()... needs to be inside the $(document).ready()... function.

Finally, since it is loaded initially without any data, there will be a delay before any autocomplete info will show up. You will need to type, wait a second and continue typing. With this current method, you will run into it downloading the data in the background on every keyup and replacing the old data.

Let me know how else I can clarify this if you need more explanation or help!

// make sure you load jquery before materialize

$(document).ready(function(){
  $('input.autocomplete').autocomplete({
    data: {foo: 'bar'}
  });
  
  $('#QTag').keyup(function (event) {
    const instance = M.Autocomplete.getInstance(document.getElementById('QTag'));
    // autocomplete expects an object, not an array
    // let tags = []; before
    let tags = {}; // after

    // mimic api call
    setTimeout(() => {
      const dataDB = [
        {tag_id:'12',tag_title:'love',tag_link:'love'}
      ];

      $.each(dataDB, function (index, value) {
        // since it is an object, don't use push
        // tags.push(value); before
        tags[value.tag_title] = value.tag_id; // after
      });
      instance.options.data = tags;
    }, 500);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="QTag" type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>