article

Thursday, April 2, 2020

Python Flask Jquery Ajax Autocomplete using SQLAlchemy database


Python Flask Jquery Ajax Autocomplete using SQLAlchemy database

 CREATE TABLE countries (
id INTEGER PRIMARY KEY,
name STRING (60)

);


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#app.py
from flask import Flask, render_template, request, jsonify, json
from wtforms import StringField, TextField, Form
from wtforms.validators import DataRequired, Length
from flask_sqlalchemy import SQLAlchemy 
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
app.config['SECRET_KEY'] = 'cairocoders-ednalan'
 
db = SQLAlchemy(app)
  
class SearchForm(Form): #create form
 country = StringField('Country', validators=[DataRequired(),Length(max=40)],render_kw={"placeholder": "country"})
 
class Country(db.Model):
 __tablename__ = 'countries'
 
 id = db.Column(db.Integer, primary_key=True)
 name = db.Column(db.String(60), unique=True, nullable = False)
 
 def as_dict(self):
  return {'name': self.name}
   
@app.route('/')
def index():
 form = SearchForm(request.form)
 return render_template('search.html', form=form)
 
@app.route('/countries')
def countrydic():
 res = Country.query.all()
 list_countries = [r.as_dict() for r in res]
 return jsonify(list_countries)
  
@app.route('/process', methods=['POST'])
def process():
 country = request.form['country']
 if country:
  return jsonify({'country':country})
 return jsonify({'error': 'missing data..'})
 
if __name__ == '__main__':
    app.run(debug=True)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//search.html
<html>
<head>
    <meta charset="utf-8">
 <title>Python Flask Jquery Ajax Autocomplete</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
<body>
<h1>Python Flask Jquery Ajax Autocomplete using SQLAlchemy database</h1>
<form class="form-inline">
 <div class="form-group">
     {{form.country(class="form-control")}}
   </div>
   <button type="submit" class="btn btn-info">Submit</button>
</form>
<div id="result"></div>
<script>
$(document).ready(function(){
 var countries=[];
 function loadCountries(){
  $.getJSON('/countries', function(data, status, xhr){
   for (var i = 0; i < data.length; i++ ) {
    countries.push(data[i].name);
   }
 });
 };
 loadCountries();
 
 $('#country').autocomplete({
  source: countries,
 });
 
 $('form').on('submit', function(e){
  $.ajax({
   data: {
    country:$('#country').val()
   },
   type: 'POST',
   url : '/process'
  })
  .done(function(data){
   if (data.error){
    $('#result').text(data.error).show();
   }
   else {
    $('#result').html(data.country).show()
   }
  })
  e.preventDefault();
 });
});
</script>
<style>
.form-control {
    display: block;
    width:300px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn {padding: .375rem .75rem; margin-top:10px;}
</style>
  </body>
</html>
Posted by ednalan at 11:15 PM . Under .

Related Post