Question

我正在django网站上的html页面上实现自动完成功能。

我希望从实现中使用自动完成功能

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

Materialize显示如何将数据传递到此自动完成

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

我理解第二部分并可以实现它。但是我不明白第一部分是如何工作的，我认为这是我所需要的。

我需要将django中User模型中的用户名传递给此自动完成功能。我该怎么做

Answer 1

您将像这样将用户名传递到上下文中：

视图

class YourView(View):
    def get(self, request, *args, **kwargs):
    return render(request, 'yourpage.html', {"users": User.objects.all()}

html （不能位于.js文件中，因为Django需要解析该文件）

  var usernames = {
    {% for user in users %}
        {{ user.username }}: "{{ user.username }}",
    {% endfor %}
  }

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: usernames,
    });
  });

如何将Django中的用户模型中的用户名传递给自动完成功能

1 个答案: