CODEWITHSUNDEEP
javascriptjquerypythonsqliteflask
kstullich
kstullich

Reputation: 681

Search Autocomplete using SQLite & Flask

I have looked around and I can't seem to find a good solution for this. I have a simple SQLite DB that has electronic products within it, and I have a search box where you can type in the name of the product to search for it. But I want to use a AutoComplete so that the user is able to see all the products that a related to what they are typing.

(i.e. If they type "EOS", it will have a little dropdown that shows them all the products with EOS lettering and they can choose which one they want)

I have seen that Ajaxx has a AutoComplete feature, but I can not find good instructions on how to properly implement it into my app (I am still fairly new to programming, only about 4 months).

Upvotes: 1

Views: 3219

Answers (2)

zelusp
zelusp

Reputation: 3678

Consider checking out Datasette which provides a mechanism to have search autocomplete and REST support from a sqlite database.

Upvotes: 0

abigperson
abigperson

Reputation: 5362

jQueryUI will be the quickest way to implement this. This is really a Javascript question, but I'll give you some tips for using Flask to implement this.

Within your view function create a list of the products based on the database, e.g.:

def index():
    products = [row.product for row in Products.query.all()]
    return render_template('index.html', products=products)

Then, within your HTML/Javascript use the following Jinja2 syntax & filters to translate the list from Python into something Javascript can use (from jQueryUI Docs):

<script>
$( function() {
    var availableTags = {{ products|tojson|safe }};
    $( "#tags" ).autocomplete({
        source: availableTags
    });
} );
</script>

You'll obviously need to build and include the appropriate jQuery UI source javascript file in addition to this code as well as jQuery UI styling CSS.

Upvotes: 3

Related Questions