重用 jquery 自动完成:https://jqueryui.com/autocomplete/#remote
我以类似的方式工作，调用远程数据源:这是我的代码
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 个最少的提前输入。但是在测试时它没有进行自动完成/正确搜索。 IE。无论我的搜索如何，它都会查询列表中的所有 4 项。
最佳答案
当您使用 URL 源时，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()
关于使用 Python 和 webapp2 的 Jquery 自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44599411/