1. 引入css和js
1 <link rel="stylesheet" href="{{ url_for('static', filename='jquery.autocomplete.css') }}"> 2 <script src="{{ url_for('static', filename='jquery-1.11.3.js') }}"></script> 3 <script src="{{ url_for('static', filename='jquery.autocomplete.js') }}"></script>
2. 添加测试html代码
1 {% macro login() %} 2 <div> 3 <div class="form-row"> 4 <span class="form-label">用户名</span> 5 <input type="text" class="form-control" id="uname"> 6 </div> 7 <div class="form-row"> 8 <span class="form-label">密码</span> 9 <input type="password" class="form-control" id="pwd"> 10 </div> 11 <div class="form-row"> 12 <span class="form-label"></span> 13 <button class="btn btn-primary btn-sm" id="denglu"> 14 <span class="glyphicon glyphicon-log-in"></span> 登录 15 </button> 16 <span id="msg" class="label label-danger"></span> 17 </div> 18 </div> 19 {% endmacro %}
3. 添加js代码，测试用户名输入的自动提示
1 jQuery("#uname").autocomplete("{{ url_for('mails') }}", { 2 minChars: 0, 3 300, 4 multiple: false, 5 matchContains: true, 6 autoFill: false, 7 parse: function(data) { 8 return $.map(eval(data), function(row) { 9 return { 10 data: row, 11 value: row.name + ' [' + row.to + ']', 12 result: row.to 13 } 14 }); 15 }, 16 formatItem: function(row, i, max) { 17 return row.name + " [" + row.to + "]"; //文本框显示的内容 18 } 19 }).result(function(event, data){ 20 console.log(data); //{name: "Master Sync", to: "205bw@samsung.com"} 21 });
4. 添加后台的python代码，被插件调用
1 @app.route('/mails/') 2 def mails(): 3 result = [ 4 {'name': "Demo", 'to': "jonney@163.com" }, 5 {'name':"Pete'r Pan", 'to': "peter@pan.de"}, 6 {'name': "Molly", 'to': "molly@yahoo.com"}, 7 {'name': "Forneria Marconi", 'to': "live@japan.jp"}, 8 {'name': "Master Sync", 'to': "205bw@samsung.com" }, 9 {'name': "Dr.Tech de Log", 'to': "g15@logitech.com" }, 10 {'name': "Don Corleone", 'to': "don@vegas.com" }, 11 {'name': "Mc Chick", 'to': "info@donalds.org" }, 12 {'name': "Donnie Darko", 'to': "dd@timeshift.info" }, 13 {'name': "Quake The Net", 'to': "webmaster@quakenet.org" }, 14 {'name': "Dr. Write", 'to': "write@writable.com" },] 15 result = [item for item in result if item['name'].find(request.args['q']) >= 0] 16 return jsonify(result)
5. 显示效果图
