如何在 Materialise 自动完成中使用动态数据？

Question

我想在按下按键时使用从数据库中获取的数据。我试过了，但没用。

$('#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
                    });
                }
            });
    });

我也试过$('input.autocomplete').autocomplete('updateData',tags);这个但是也没用。

-

这是我的Laravel控制器

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

Answer 1

好的，这是我帮助解决此问题的初步尝试。 https://codepen.io/tuffant21/pen/KKpBapd 我注意到的第一件事是您正在使用数组进行自动完成。请注意，自动完成需要一个对象，而不是一个数组。

其次，您需要初始化页面加载时的自动完成功能。然后使用 instance.options.data 更新实例中的数据对象。 $('#QTag').keyup()... 需要在 $(document).ready()... 函数中。

最后，由于最初加载时没有任何数据，因此在显示任何自动完成信息之前会有延迟。您需要输入，稍等片刻，然后继续输入。使用当前的方法，您将运行进入其中，在每次按键时在后台下载数据并替换旧数据。

如果您需要更多解释或帮助，请告诉我我还能如何澄清这一点！

// 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>

如何在 Materialise 自动完成中使用动态数据？

How can I use dynamic data in Materialize autocomplete?

ajax

jquery

autocomplete

materialize

laravel