JQuery autocomplete in bulb

Question

JQuery autocomplete in bulb

Unable to create jQuery autocomplete widget with framework. ( http://jqueryui.com/autocomplete/#remote here is an example)
In manage.py, I got the following:

@app.route('/autocomplete', methods=['GET'])
def autocomplete():
    results = []
    search = request.args.get('autocomplete')
    for mv in db_session.query(Movie.title).filter(Movie.title.like('%' + str(search) + '%')).all():
        results.append(mv[0])
    return jsonify(json_list=results)

My index.html file :

    <head>
    ...
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="../static/js/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>


    <script type="text/javascript">
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data) {
                $('#autocomplete').autocomplete({
                    source: data.json_list,
                    minLength: 2
                });
            });
        });
    </script>
    ...
    </head>
    <body>
    ...
       <div>
          <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg"/>
       </div>
    ...
    </body>

It seems that dev tools in firefox do not return any errors. The terminal returns the following:

"GET / autocomplete HTTP / 1.1" 200 -
"GET / HTTP / 1.1" 200 -
"GET /static/css/bootstrap.css HTTP / 1.1" 304 -
"GET / static / js / jquery.js HTTP / 1.1" 304 -

The widget just doesn't work. Since I don't know much about jQuery, I cannot figure out what causes the problem. Can anybody help me?

+4

javascript jquery ajax flask autocomplete

Steve 10 . '16 11:46

1

GG_Python · Accepted Answer · 2016-01-11T01:24:42+0000

JS/jQuery Flask:

@app.route('/autocomplete', methods=['GET'])
def autocomplete():
    search = request.args.get('q')
    query = db_session.query(Movie.title).filter(Movie.title.like('%' + str(search) + '%'))
    results = [mv[0] for mv in query.all()]
    return jsonify(matching_results=results)

HTML/JQuery:

<head>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

<script type="text/javascript">
$(function() {
    $("#autocomplete").autocomplete({
        source:function(request, response) {
            $.getJSON("{{url_for('autocomplete')}}",{
                q: request.term, // in flask, "q" will be the argument to look for using request.args
            }, function(data) {
                response(data.matching_results); // matching_results from jsonify
            });
        },
        minLength: 2,
        select: function(event, ui) {
            console.log(ui.item.value); // not in your question, but might help later
        }
    });
})

</script>
</head>
<body>
    <div>
        <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg"/>
    </div>
</body>

: 'q' - , jQuery $.getJSON ajax call. request.args.get. , . , , for + append; .

jsonify results, , matching_results, . json.dumps, ajax. . , (TL/DR: ).

, , , script/flask "" . , ajax results, matching_results. ( javascript) data.

matching_results , script. , , , JS/jquery.

, select , , .

jquery-autocomplete . " AJAX" .

JQuery autocomplete in bulb

More articles: