Autocomplete Suchfeld und Wert an Kolben übergeben

Ich bereite eine Demo vor und dies ist das erste Mal, dass ich "Web Dev" mache. Also, könnte eine Frage sein, aber hier ist was ich versuche zu tun.Autocomplete Suchfeld und Wert an Kolben übergeben

Ich möchte zwei Suchfelder haben, die als Eingabe automatisch vervollständigt werden.

First search box: name 
Second search box: song

Ich habe zwei Dateien names.txt und songs.txt

die Idee ist also, dass, wenn der Benutzername ist die Eingabe, aus names.txt liest die Autovervollständigung zu erzeugen, und wenn der Benutzer ist Typisierung Song, die autocompletes Suchfeld basierend auf songs.txt

Und dann werden diese Werte übergeben App in Back-End-Kolben ..

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

ich wie ein sehr einfaches Beispiel benötigen (nothin g Phantasie), die dies nur tut ..

Dank

Quelle

2016-09-21 Fraz

Haben Sie die Autovervollständigen-Boxen haben Posting automatisch? Sie brauchen nur Hilfe bei der Konstruktion der Kolben-API, um die Daten zurückzugeben? – GMarsh

@GMarsh Nein. Ich brauche auch den Javascript-Teil – Fraz

Wie wäre es jQuery-Autocomplete verwenden. Dies sollte Ihnen den Einstieg:

**/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.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.min.js"></script> 
</head> 

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

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


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

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

Quelle

2016-09-22 02:51:05 GMarsh

Autocomplete Suchfeld und Wert an Kolben übergeben

Antwort

Verwandte Themen