jQuery的自动完成Python和webapp2的

重用jQuery的自动完成：https://jqueryui.com/autocomplete/#remote jQuery的自动完成Python和webapp2的

我类似的方式工作，要求远程数据源：这是我的代码

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)

和JS

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

我有自动完成似乎与2最低typeaheads工作。但是在测试时，它不会自动完成/正确搜索。即。无论我搜索什么，它都会查询列表中的所有4个项目。当您使用的URL源

来源

2017-06-16 Stanley Shang

Jquery的不过滤列表。它在查询字符串中传递搜索词作为术语变量。为远程源的文档是在这里：http://api.jqueryui.com/autocomplete/#option-source

您需要根据项请求参数在你的处理器返回过滤后的数据。换句话说，改变了你的产品的处理程序，以更多的东西是这样的：

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)

下面是一个基于jQuery开发的UI自动完成样本的完整工作示例：

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()

来源

2017-06-17 04:10:05 clockwatcher

jQuery的自动完成Python和webapp2的

回答

相关问题