jQuery autocomplete 應用

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     width: 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. 顯示效果圖