JQuery Autocomplete mit Python und webapp2

ich in ähnlicher Weise arbeitete, auf einem Remote-Datenquelle aufrufen: dies ist mein Code

class Products(webapp2.RequestHandler): 
    def get(self): 
     self.response.headers['Content-Type'] = 'application/json' 
     data = ['cat','dog','bird', 'wolf'] 
     data = json.dumps(data) 
     self.response.out.write(data) 

app = webapp2.WSGIApplication([ 
    ('/', MainPage), 
    ('/products', Products), 
], debug=True)

und JS

<script> 
    $("#autocomplete").autocomplete({ 
     minLength: 2, 
     source: "/products" 
    }); 
</script>

Ich habe eine automatische Vervollständigung, die mit 2 minimalen Typaeheads zu arbeiten scheint. Aber wenn es getestet wird, macht es keine automatische Vervollständigung/richtige Suche. dh. Es fragt alle 4 Elemente in der Liste ab, unabhängig von meiner Suche.

Quelle

2017-06-16 Stanley Shang

Jquery filtert die Liste nicht, wenn Sie eine URL-Quelle verwenden. Er übergibt den Suchbegriff in der Querystring als Termvariable. Die Dokumentation für eine Remote-Quelle finden Sie hier: http://api.jqueryui.com/autocomplete/#option-source

Sie müssen die gefilterten Daten in Ihrem Handler basierend auf dem Term-Request-Parameter zurückgeben. Mit anderen Worten, Ihre Produkte Handler etwas ändern sich mehr wie folgt aus:

class Products(webapp2.RequestHandler): 
    def get(self): 
     term = self.request.get('term', None) 
     self.response.headers['Content-Type'] = 'application/json' 
     data = ['cat', 'dog', 'bird', 'wolf'] 
     if term: 
      data = [i for i in data if i.find(term) >= 0 ] 
     data = json.dumps(data) 
     self.response.out.write(data)

Hier ist ein voll funktionierendes Beispiel auf der Grundlage der jquery-ui zur automatischen Vervollständigung Beispiel:

import webapp2 
import json 

class MainPage(webapp2.RequestHandler): 
    def get(self): 
     self.response.out.write(""" 
<html> 
<head> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script> 
    $(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#animals").autocomplete({ 
     source: "./products", 
     minLength: 2, 
     select: function(event, ui) { 
     log("Selected: " + ui.item.value + " aka " + ui.item.id ); 
     } 
    }); 
    }); 
</script> 
</head> 
<body> 
<div class="ui-widget"> 
    <label for="animals">Animals: </label> 
    <input id="animals"> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
    Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 
</body> 
</html> 
""") 

class Products(webapp2.RequestHandler): 
    def get(self): 
     term = self.request.get('term', None) 
     self.response.headers['Content-Type'] = 'application/json' 
     data = ['cat', 'dog', 'bird', 'wolf'] 
     if term: 
      data = [{"label":i, "id":i + "_id"} for i in data if i.find(term) >= 0 ] 
     data = json.dumps(data) 
     self.response.out.write(data) 

app = webapp2.WSGIApplication([ 
    ('/', MainPage), 
    ('/products', Products), 
], debug=True) 

def main(): 
    from paste import httpserver 
    httpserver.serve(app, host="0.0.0.0", port="8080") 

if __name__ == '__main__': 
    main()

Quelle

2017-06-17 04:10:05 clockwatcher

JQuery Autocomplete mit Python und webapp2

Antwort

Verwandte Themen