typeahead autocomplete suggestion with ajax doesn't work

Question

let's say I type for example "j" and I should see autocomplete like for example John with more suggestions below input tag, but I don't. In my console I get ["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)

clearly you are expecting `process` to do something ... it is not doing it... what do you expect `process` to do? is that part of lookahead.js api? — Joran Beasley, Jun 19 '15 at 16:30

score 1 · Accepted Answer · answered Jun 20 '15 at 00:06

I think Typeahead has been updated, and now your 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 the Typeahead.js docs on Bloodhound.

thx for your answer. this is working fine for a list from my example ["John","Jane"] and when I type "j". But if I change that list to ["John","Jane", "Sandra", "Xerox"] and type for example "x" or "o" then I always get for a suggestion John — user729076, Jun 20 '15 at 10:47
Huh. I'm not entirely sure why that's happening. I was able to fix it by slightly modifying the `test()` function to only return names that had the query in it: `return jsonify(options=[name for name in names if query.lower() in name.lower()])` — Samuel Taylor, Jun 20 '15 at 11:42

score 0 · Answer 2 · edited May 23 '17 at 11:58

Actually, your code can work fine...if you know what changed.

What changed? The signature of the source function!

Instead of 1 process function, there are now 2. The first is for synchronous operation. The second is for asynchronous operation. Change

source: function (query, process) {

to

source: function (query, dummy, process) {

and the code in the original post should work fine...

...except, there is a bug in the async processor. See TypeAhead.js and Bloodhound showing an odd number of results

typeahead autocomplete suggestion with ajax doesn't work

2 Answers2

Linked