Question

重用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个最小类型。但是在测试时它没有进行自动完成/正确搜索。即。无论我的搜索是什么，它都在查询列表中的所有4个项目。

Answer 1

使用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自动完成

1 个答案: