jQuery autocomplete 应用

1. 引入css和js

   <link rel="stylesheet" href="{{ url_for('static', filename='jquery.autocomplete.css') }}">
   <script src="{{ url_for('static', filename='jquery-1.11.3.js') }}"></script>
   <script src="{{ url_for('static', filename='jquery.autocomplete.js') }}"></script>

2. 添加测试html代码

 {% macro login() %}
 <div>
   <div class="form-row">
     <span class="form-label">用户名</span>
     <input type="text" class="form-control" id="uname">
   </div>
   <div class="form-row">
     <span class="form-label">密码</span>
     <input type="password" class="form-control" id="pwd">
   </div>
   <div class="form-row">
     <span class="form-label"></span>
     <button class="btn btn-primary btn-sm" id="denglu">
       <span class="glyphicon glyphicon-log-in"></span> 登录
     </button>
     <span id="msg" class="label label-danger"></span>
   </div>
 </div>
 {% endmacro %}

3. 添加js代码，测试用户名输入的自动提示

   jQuery("#uname").autocomplete("{{ url_for('mails') }}", {
     minChars: 0,
     width: 300,
     multiple: false,
     matchContains: true,
     autoFill: false,
     parse: function(data) {
         return $.map(eval(data), function(row) {
             return {
                 data: row,
                 value: row.name + ' [' + row.to + ']',
                 result: row.to
             }
         });
     },
     formatItem: function(row, i, max) {
       return row.name + " [" + row.to + "]";  //文本框显示的内容
     }
   }).result(function(event, data){
     console.log(data);  //{name: "Master Sync", to: "205bw@samsung.com"}
   });

4. 添加后台的python代码，被插件调用

 @app.route('/mails/')
 def mails():
     result = [
             {'name': "Demo", 'to': "jonney@163.com" },
             {'name':"Pete'r Pan", 'to': "peter@pan.de"},
             {'name': "Molly", 'to': "molly@yahoo.com"},
             {'name': "Forneria Marconi", 'to': "live@japan.jp"},
             {'name': "Master Sync", 'to': "205bw@samsung.com" },
             {'name': "Dr.Tech de Log", 'to': "g15@logitech.com" },
             {'name': "Don Corleone", 'to': "don@vegas.com" },
             {'name': "Mc Chick", 'to': "info@donalds.org" },
             {'name': "Donnie Darko", 'to': "dd@timeshift.info" },
             {'name': "Quake The Net", 'to': "webmaster@quakenet.org" },
             {'name': "Dr. Write", 'to': "write@writable.com" },]
     result = [item for item in result if item['name'].find(request.args['q']) >= 0]
     return jsonify(result)

5. 显示效果图