jquery - typeahead autocomplete suggestion with ajax doesn't work -
let's type example "j" , should see autocomplete example john more suggestions below input tag, don't. in console ["john", "jane"], no errors.
test.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> </head> <body> <div id="aa"> <input class="typeahead" type="text" placeholder="names"> </div> <script src="../static/jquery-1.11.3.min.js"></script> <script src="../static/typeahead.bundle.js"></script> <script> $('#aa .typeahead').typeahead(null, { source: function (query, process) { $.ajax({ url: '/test/', type: 'get', contenttype: "application/json; charset=utf-8", data: {'query': query}, success: function(data) { console.log(data.options); process(data.options); } }); } }); </script> </body> </html> app.py
from flask import flask, render_template, url_for, jsonify, request app = flask(__name__) @app.route('/') def index(): return render_template('test.html') @app.route('/test/') def test(): print request.args.get('query') return jsonify(options=["john","jane"]) if __name__ == '__main__': app.run(debug = true)
i think typeahead has been updated, , code won't work.
try this:
<html lang="en"> <head> <meta charset="utf-8"/> </head> <body> <div id="aa"> <input class="typeahead" type="text" placeholder="names"> </div> <script src="../static/jquery-1.11.3.min.js"></script> <script src="../static/typeahead.bundle.js"></script> <script> var engine = new bloodhound({ remote: { url: '/test/?query=*', wildcard: '*', transform: function (response) { return response.options; } }, querytokenizer: bloodhound.tokenizers.whitespace, datumtokenizer: bloodhound.tokenizers.whitespace, }); $('#aa .typeahead').typeahead(null, { name: 'my-dataset', source: engine }); </script> </body> </html> for more information, see typeahead.js docs on bloodhound.
Comments
Post a Comment