Autocomplete Flask Ajax

base.html

{% extends "bootstrap/base.html" %}
{% block html_attribs %} lang="pt-br"{% endblock %}
{% block title %}{{ _('Dados Livres') }}{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Style CSS -->
{% block styles %}{{super()}}
  <link rel="stylesheet" href="{{url_for('static', filename='css/jquery-ui.css')}}">
  <link rel="stylesheet" href="{{url_for('static', filename='css/mystyle.css')}}">
  <link rel="icon" href="data:;base64,=">
{% endblock %}

{% block navbar %}
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{ url_for('main.index') }}">{{ _('DadosLivres.org') }}</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="{{ url_for('main.index') }}">{{ _('Página Inicial') }}</a></li>
        </ul>

        {% if g.search_form %}
          <form class="navbar-form navbar-left" method="get" action="{{ url_for('main.search') }}">
            <div class="form-group">
              {{ g.search_form.q(size=20, class='form-control', placeholder=g.search_form.q.label.text) }}
            </div>
          </form>
        {% endif %}

        <ul class="nav navbar-nav navbar-right">
          {% if current_user.is_anonymous %}
            <li><a href="{{ url_for('auth.login') }}">{{ _('Entrar') }}</a></li>
            <li><a href="{{ url_for('auth.register') }}">{{ _('Registre-se') }}</a></li>
          {% else %}
            <li><a href="{{ url_for('main.register_source') }}"> {{ _('Cadastrar fonte') }} </a></li>
            <li><a href="{{ url_for('main.register_software') }}"> {{ _('Cadastrar software') }} </a></li>
            <li><a href="{{ url_for('main.user', username=current_user.username) }}">{{ _('Perfil') }}</a></li>
            <li><a href="{{ url_for('auth.logout') }}">{{ _('Sair') }}</a></li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>
{% endblock %}

{% block content %}
  <div class="container">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <div class="alert alert-info" role="alert">{{ message }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {# application content needs to be provided in the app_content block #}
    {% block app_content %}{% endblock %}
  </div><br><hr><br>

    <footer class="footer">
      <div class="container">
        <p class="text-center text-muted copyright"> &copy;  Copyright 2019 by <a href="">Dados Livres &nbsp;&#8226;&nbsp;
          Data &amp; Statistics Division</p>
      </div>
    </footer><br>
{% endblock %}



<!-- JavaScript, jQuery -->
{% block scripts %}
  <script type="text/javascript" src="{{url_for('static', filename='js/myscripts.js') }}"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script> window.jQuery || document.write('
    <script src="{{ url_for('static', filename='js/jquery.js') }}">\x3C/script>')</script>
  <script src="{{url_for('static', filename='js/jquery-ui.js')}}"></script>
  <script type=text/javascript> $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};</script>
{{super()}}{% endblock %}

form.py

class AutoComplementeForm(FlaskForm):
    autocomplete =  StringField('Título:', id='autocomplete', validators=[DataRequired()])
    submit = SubmitField(_l('Concluir'))

myscript.js

$(document).ready(function(){
  var titles=[];

  function loadTitles(){
      $.getJSON('/_autocomplete', function(data, status, xhr){
        for (var i = 0; i < data.length; i++ ) {
          titles.push(data[i].title);
        }
      });
    };

    loadTitles();

    $('#autocomplete').autocomplete({
      source: data
    });
  });

post.html

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
<table class="table table-hover">
    <tr valign="top">
        <td>
              <h1>{{ post.title }}</h1>
              {% if post.tag %}<p>{{ _('Palavras-chave') }}: {{ post.tag }}</p>{% endif %}
              {% if post.categorie %}<p>{{ _('Categoria') }}: {{ post.categorie }}</p>{% endif %}
              {% if post.sphere %}<p>{{ _('Esfera') }}: {{ post.sphere }}</p>{% endif %}
              {% if post.description %}<p>{{ _('Descrição') }}: {{ post.description }}</p>{% endif %}
              {% if post.officialLink %}<p>{{ _('Link Oficial') }}: <a href="{{ post.officialLink }}" target="_blank"> {{ post.officialLink }}</a></p>{% endif %}
              {{ _('Cadastrado por') }}: <a href="{{ url_for('main.user', username=post.author.username ) }}">
                {{ post.author.username }} </a><br><br>

              {% if not current_user.is_anonymous %}
              <p><a href="{{ url_for('main.edit_post', id=post.id) }}">{{ _('Editar fonte') }}</a> |
                <a href="{{ url_for('main.deletar_post', id=post.id) }}">{{ _('Excluir fonte') }}</a></p>
              {% endif %}
              <!--  <p><a href="{{ url_for('main.favorite', title=post.title) }}">{{ _('Favoritar') }}</a> |
                  <a href="{{ url_for('main.unfavorite', title=post.title) }}">{{ _('Deixar de favoritar') }}</a></p>-->
        </td>
    </tr>
</table>

<!-- Formulario que vai ter a função de autocomplete -->
<div class="row">
    <div class="col-md-4">
        {{ wtf.quick_form(form) }}
    </div>
</div><br>

routes.py

@bp.route('/_autocomplete', methods=['GET'])
def autocomplete():
    res = Post.query.all()
    list_titles = [r.as_dict() for r in res]
    return jsonify(list_titles)

  
@bp.route('/post/<title>', methods=['GET', 'POST'])
def post(title):
    form = AutoComplementeForm(request.form)

    return render_template('post.html', form=form)
  

Tutorial - Flask: Form, Ajax and SQLAlchemy:

http://abdulbaqi.io/2017/11/26/flask-form-ajax-sqlalchemy/