14

Yet another question about flask and jquery autocomplete. I have been reading and trying the following answered questions without any success:

Flask AJAX Autocomplete

Using jQuery autocomplete with Flask

In particular the second answer is perfectly matching my case.

However for some reasons (maybe it's me not understanding what is supposed to do), the callback autocomplete(..) is executed only once when I load the page (and correctly autocomplete the value in NAMES) but never while typing in the textbox.

search.html

<head>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
</head>

{{ form.autocomp.label }}: {{ form.autocomp }}

<script>
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data) {
                $('#autocomplete').autocomplete({
                    source: data,
                    minLength: 2
                });
            });
        });
</script>

application.py

from flask import Flask, Response, render_template, request
import json

app = Flask(__name__)

import wtforms as wt
from wtforms import TextField, Form

NAMES=["abc","abcd","abcde","abcdef"]

class SearchForm(Form):
    autocomp= TextField('autocomp',id='autocomplete')

@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('term')

    app.logger.debug(search)
    return Response(json.dumps(NAMES), mimetype='application/json')

@app.route('/',methods=['GET','POST'])
def index():
    form = SearchForm(request.form)
    return render_template("search.html",form=form)

if __name__ == '__main__':
    app.run(debug=True)
Community
  • 1
  • 1
memecs
  • 7,196
  • 7
  • 34
  • 49

2 Answers2

10

Try this

from flask import jsonify

NAMES=["abc","abcd","abcde","abcdef"]

@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('term')

    app.logger.debug(search)
    return jsonify(json_list=NAMES)

In Jquery:

<script>
$(function() {
    $.ajax({
        url: '{{ url_for("autocomplete") }}'
        }).done(function (data) {
            $('#autocomplete').autocomplete({
                source: data.json_list,
                minLength: 2
            });
        });
    });
</script>
kartheek
  • 6,434
  • 3
  • 42
  • 41
  • The search field is always None.. How to pass the value in the textbox to python? – Valentas Jun 16 '15 at 07:57
  • Hi @kartheek, I am trying to implement autocomplete feature but its not working for me. Could you please help me. Due to word limitations, I have put my code in pastebin at http://pastebin.com/fY2AXm3X – Pradeepb Dec 31 '15 at 00:06
  • This didn't work for me as well (search is always None). I tried [this other solution](https://stackoverflow.com/a/34712822/1194761) and that worked in my case. – prrao Nov 20 '19 at 19:42
4

It doesn't work because a missprint in a suggested piece of code:

from flask import jsonify
NAMES=["abc","abcd","abcde","abcdef"]
@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('term')

Change in search = request.args.get('term') 'term' to 'autocomplete'. So correct code should be as follow:

from flask import jsonify
NAMES=["abc","abcd","abcde","abcdef"]
@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('autocomplete')
Alexey Pirogov
  • 57
  • 5