使用 Python 和 webapp2 的 Jquery 自动完成功能答案

【问题标题】：Jquery Autocomplete with Python and webapp2使用 Python 和 webapp2 的 Jquery 自动完成功能
【发布时间】：2017-11-19 19:56:44
【问题描述】：

重用 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 个项目。

【问题讨论】：

标签： jquery python autocomplete webapp2

【解决方案1】：

当您使用 URL 源时，Jquery 不会过滤列表。它将查询字符串中的搜索词作为 term 变量传递。远程源的文档在这里：http://api.jqueryui.com/autocomplete/#option-source

您需要根据 term 请求参数在处理程序中返回过滤后的数据。换句话说，将您的产品处理程序更改为更像这样：

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

【讨论】：