javascript - Autocomplete search box and pass value to flask

I am preparing a demo and this is the first time I am doing "web dev". So, might be totally a noob question but here is what I am trying to do.

I want to have two search boxes which autopletes as typing.

First search box: name
Second search box: song

I have two files names.txt and songs.txt

So, the idea is that when the user is typing name, it is reading from names.txt to generate the autoplete and when user is typing song, the search box autopletes based on songs.txt

And then these values are passed to flask app in backend..

@app.route('/search', method=['post'])
def process():
  return name, song, and list of other songs with score (list a table)

I need like a very simple example (nothing fancy) which just does this..

Thanks

I am preparing a demo and this is the first time I am doing "web dev". So, might be totally a noob question but here is what I am trying to do.

I want to have two search boxes which autopletes as typing.

First search box: name
Second search box: song

I have two files names.txt and songs.txt

So, the idea is that when the user is typing name, it is reading from names.txt to generate the autoplete and when user is typing song, the search box autopletes based on songs.txt

And then these values are passed to flask app in backend..

@app.route('/search', method=['post'])
def process():
  return name, song, and list of other songs with score (list a table)

I need like a very simple example (nothing fancy) which just does this..

Thanks

Share Improve this question asked Sep 21, 2016 at 10:56 frazman 33.3k81 gold badges193 silver badges281 bronze badges

Do you have the autoplete boxes posting automatically? You just need help constructing the flask api to return the data? – GMarsh Commented Sep 21, 2016 at 13:09
@GMarsh no.. I need the Javascript part too – frazman Commented Sep 21, 2016 at 16:16

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

How about using jQuery-Autoplete. This should get you started:

**/app.py**

from flask import Flask, request, render_template, jsonify
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/search/<string:box>")
def process(box):
    query = request.args.get('query')
    if box == 'names':
        # do some stuff to open your names text file
        # do some other stuff to filter
        # put suggestions in this format...
        suggestions = [{'value': 'joe','data': 'joe'}, {'value': 'jim','data': 'jim'}]
    if box == 'songs':
        # do some stuff to open your songs text file
        # do some other stuff to filter
        # put suggestions in this format...
        suggestions = [{'value': 'song1','data': '123'}, {'value': 'song2','data': '234'}]
    return jsonify({"suggestions":suggestions})

if __name__ == "__main__":
    app.run(debug=True)

**/templates/index.html**

<head>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery.devbridge-autoplete/1.2.26/jquery.autoplete.min.js"></script>
</head>

<body>
  Names:
  <input type="text" name="names" id="autoplete1"/>

  Songs:
  <input type="text" name="songs" id="autoplete2"/>


  <script>
  $('#autoplete1').autoplete({
      serviceUrl: '/search/names',
      dataType: 'json',
      onSearchComplete: function (query, suggestions) {
        console.log(query);
      }
  });

  $('#autoplete2').autoplete({
      serviceUrl: '/search/songs',
      dataType: 'json',
      onSearchComplete: function (query, suggestions) {
        console.log(query);
      }
  });
  </script>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Autocomplete search box and pass value to flask - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)