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,
     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. 显示效果图