HTML-Dropdownmenü/Typaheads (von Python bis JavaScript)

Question

Mein Plan ist es, eine Website zu erstellen, auf der Menschen Tagebücher schreiben und Tagebücher lesen können. Ich bin gerade dabei, ein Suchfeld zu implementieren, in dem der Benutzer Benutzernamen suchen kann Lesen Sie die Tagebücher anderer (wie Sie einen Freund auf Facebook nachschlagen können), also habe ich den folgenden Code für das Suchfeld geschrieben, mit dem Python-Code (enthält SQLite-Anweisungen), der Suchergebnisse aus der Datenbank extrahiert und mit dem JavaScript ständig die Suchaktion hinter der Szene, um sie als dynamisches Dropdown-Menü an auszugeben. Der Dropdown-Teil funktioniert jedoch nicht.

Application.py

@app.route("/search", methods=["GET", "POST"]) 
@login_required 
def search(): 
"""Search published diaries from others.""" 

    # if user reached route via POST (as by submitting a form via POST) 
    if request.method == "POST": 

     # ensure friends' usernames were submitted 
     if not request.form.get("search"): 
      return dumbo("No username entered") 

     # search user's friends from database 
     # append % to q so that user doesn't have to input city/state/postal code in the URL completely/accurately 
     # https://www.tutorialspoint.com/sqlite/sqlite_like_clause.htm 
     friend = request.form.get("search") + "%" 
     searches = db.execute("SELECT username FROM writers WHERE username LIKE :friend", friend=friend) 

     # output a JSON array of objects, each represents a row from TABLE writers that matches what the user looks for 
     return jsonify(searches) 

    # else if user reached route via GET (as by clicking a link or via redirect) 
    else: 
     return render_template("search.html") 

scripts.js

$("#friend").keydown(function() { 

    // configure typeahead 
    $("#friend").typeahead({ 
     // If true, when suggestions are rendered, pattern matches for the current query in text nodes 
     // will be wrapped in a strong element with its class set to {{classNames.highlight}}. Defaults to false. 
     highlight: false, 
     // The minimum character length needed before suggestions start getting rendered. Defaults to 1. 
     minLength: 1 
    }, 
    { 
     display: function(suggestion) { return null; }, 
     limit: 5, 
     source: search, 
     templates: { 
      suggestion: Handlebars.compile(
       "<div>" + 
       "<div>{{username}}</div>" + 
       "</div>" 
      ) 
     } 
    }); 
    // action after friend is selected from drop-down 
    $("#friend").on("typeahead:selected", function(eventObject, suggestion, name) { 

     // visit friend's diaries (to be continued) 

    }); 
}); 

/** 
* Searches database for typeahead's suggestions. 
*/ 
// search calls asyncResults after searching is done (asynchronously) 
function search(query, syncResults, asyncResults) 
{ 
    // get usernames matching query (asynchronously) 
    var parameters = { 
    friend: $("#friend").val() 
    }; 
    $.getJSON(Flask.url_for("search"), parameters) 
    .done(function(data, textStatus, jqXHR) { 

     // call typeahead's callback with search results (i.e., friends) 
     asyncResults(data); 
    }) 
    .fail(function(jqXHR, textStatus, errorThrown) { 

     // log error to browser's console 
     console.log(errorThrown.toString()); 

     // call typeahead's callback with no results 
     asyncResults([]); 
    }); 
} 

search.html

{% extends "layout.html" %} 

{% block title %} 
    Search 
{% endblock %} 

{% block main %} 
    <form action="{{ url_for('search') }}" method="post"> 
     <fieldset> 
      <div class="form-group"> 
       <input autocomplete="off" autofocus class="typeahead" id="friend" name="search" placeholder="Search friends" type="text"/> 
      </div> 
      <div class="form-group"> 
       <button class="btn btn-default" type="submit">Search</button> 
      </div> 
      <!-- https://www.mkyong.com/javascript/how-to-link-an-external-javascript-file/ --> 
      <script type="text/javascript" src="static/scripts.js"></script> 
     </fieldset> 
    </form> 
{% endblock %} 

ich buchstäblich gerade erst begonnen CS lernen, so wenden Sie sich bitte beraten, als ob ich ein Idiot bin , Danke!!!!

Answer 1

In Ihrem Application.py, POST Methode gibt jsonify(searches),

so denke ich, $.post statt $.getJSON in

$.getJSON(Flask.url_for("search"), parameters) 
... 

Update verwenden sollten:

Wenn Sie Freund von "Suche" in Server erhalten ,

friend = request.form.get("search") + "%" 

dann sollte

in parameters Suchfunktion friend zu search ändern

var parameters = { 
//friend: $("#friend").val() 
    search: $("#friend").val() 
};