Building Autocomplete with Flask, MongoDB, jQuery

Question

I am attempting to build an autocomplete search using Flask, MongoDB, and jQuery Autocomplete. I want to show a list of addresses once a user starts to type them in a search bar. For example, if a user types 123 F, I want to show the 5 closely matched addresses based on that string. Once you select an address from the list, I'd like to show some attributes associated with that address that are part of the same CSV table.

I have a simple CSV file of addresses that is structured like this:

ID ADDRESS
1  123 Fakevill St
2  35 Lakeshore Rd
.. and so on

I first imported this CSV file into MongoDB using the following command:

mongoimport --db myDB --collection myAddresses --file "/path/to/file" --type csv --headerline

While I haven't begun working on the client-side yet, I have run into some issues on the server-side. My server-side regex query does not return any results. Here is how I have set it up in Flask:

@app.route('/getInfoByAddress', methods=['GET'])
def getInfoByAddress():
    searchedAddress = request.args.get("Address")
    addressCollection = myDB["addresses"]
    addressJSON = []
    regex = "/^" + searchedAddress + "/"

    for address in addressCollection.find({'Address': re.compile(regex, re.IGNORECASE)},{"Address":1, "ID":1, "_id":0}):
        addressJSON.append({"Address":address["Address"]})
    return jsonify({"Addresses":addressJSON})

I'm using a combination of regex and re to deal with autocomplete and type cases. Currently when I go to my browser to test the query, myapp.dev:5000/getInfoByAddress?Address=123 F, it returns an empty JSON:

{
  "Addresses": []
}

When I do print regex, I can see the proper string (/^123 F/) being sent to the database in my command line window, but unfortunately I am not seeing any results.

What does `addressCollection.find(...)` return? Are you sure the data loaded correctly? Can you get anything out of the DB? — kylieCatt, Jul 07 '16 at 21:41
It appears your query is not correct: http://stackoverflow.com/questions/3483318/performing-regex-queries-with-pymongo — kylieCatt, Jul 07 '16 at 21:42
In command line, when I do `db.addresses.find().limit(5)`, I can see the list of addresses, so the data is there. — kaoscify, Jul 07 '16 at 21:43
@IanAuld You are correct. Using `$regex` in my query worked. I can see the addresses now. — kaoscify, Jul 07 '16 at 21:51

Justin Olson · Accepted Answer · 2016-07-07T21:32:14.503

0

This might not be the solution you are looking for, but the functionality is exactly what you want to do. Select2 has an autocomplete remote data loading function via ajax that is very simple to implement and might make your life easier.

https://select2.github.io/examples.html scroll down to loading remote data and play with the github example they have.

EDIT:

The back end issue could be one of many things. Since you are getting the Addresses:[] your endpoint is set up properly it just isn't getting filled with data before the request. Is there any server side error message? Try printing the address immediately after the start of the for loop before you append to the array and check to see if there is data there. It could be one of many things. The query itself has an issue and isn't returning data. The data isn't in the format you are expecting and you could have a dictionary key issue. I have not worked with mongo for a while so this one is a shot in the dark. Try for address in addressCollection.find({'Address': re.compile(regex, re.IGNORECASE)}).fetch():

edited Jul 07 '16 at 21:32

answered Jul 07 '16 at 21:17

Justin Olson

126
2
13

This is a good solution for the front-end but I am currently struggling with setting up the query on the back-end. – kaoscify Jul 07 '16 at 21:23
No server side errors. I tried printing the address after the start of loop and before appending to array but nothing is getting printed in the console. I modified by for loop code above to include this in the query `{"Address":1, "ID":1, "_id":0}`. Also, when I try the line you suggest, I get an error saying `'Cursor' object has no attribute 'fetch'`. – kaoscify Jul 07 '16 at 21:46
'Cursor' object will not have fetch attribute because whenever you call find method it will automatically fetch objects and combine them into a cursor object. – Parth Chauhan Feb 20 '18 at 13:43

Building Autocomplete with Flask, MongoDB, jQuery

1 Answers1