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. 显示效果图
jQuery autocomplete 应用的更多相关文章
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- jquery.autocomplete 模糊查询 支持分组
//demo <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <lin ...
- 使用jQuery Autocomplete(自动完成)插件
jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...
- jquery autocomplete实现读取sql数据库自动补全TextBox
转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- [Jquery] Jquery AutoComplete的使用方法实例
jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- [转]jQuery.Autocomplete实现自动完成功能(详解)
本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题. 1.jquery.autocomplete参考地址 htt ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...
随机推荐
- 远程连接linux服务上的mysql
如果有童鞋linux上还未安装mysql数据库可以参考我上一篇博客 (1)首先确保 linux服务上的 mysql 的3306端口是对外开放的 编辑 vi /etc/sysconfig/iptable ...
- Glib之GObject宏介绍
G_DEFINE_TYPE定义一个静态类型 /** * G_DEFINE_TYPE(`G_DEFINE_TYPE_WITH_CODE`比`G_DEFINE_TYPE`就是多了一个自定义代码参数_C_) ...
- 宏定义(无参宏定义和带参宏定义),C语言宏定义详解
1.宏定义说明 宏定义是比较常用的预处理指令,即使用"标识符"来表示"替换列表"中的内容.标识符称为宏名,在预处理过程中,预处理器会把源程序中所有宏名,替换成宏 ...
- 关于jboss的线程问题+java.lang.outofmemoryError
近日来,用Jmeter做压力测试.发现,每台客户机使用800个线程组压力倍增.昨天的测试,到了今天下午都没有跑完. 仔细观察了下Jboss的错误日志,发现,jboss已经宕机了. 本身后台的环境是使用 ...
- Kubernetes权威指南学习笔记(一)
https://blog.csdn.net/keysilence1/article/details/70239717 概念 Kubernetes是谷歌严格保密十几年的秘密武器——Borg的一个开源版本 ...
- rpm命令-以jenkins为例
1.列出所有安装的Jenkins rpm -qa | grep jenkins 2.软件是否安装:例如:jenkins是否安装 rpm -qa | grep jenkins 3.rpm -ql 列出软 ...
- 1、TensorFlow简介
参考:http://www.tensorfly.cn/tfdoc/get_started/basic_usage.html 1.用TensorFlow构造一个简单的线性拟合: # -*- coding ...
- Preferences偏好设置
Preferences偏好设置-Preferences偏好设置 General(综合设置):在综合设置界面内,对Unity集成开发环境进行一些相关的设置 Auto Refresh:自动更新 Alway ...
- Android 通知(Notification)
1.介绍 2.常用属性 3.java后台代码 package com.lucky.test30notification; import android.app.Notification; import ...
- [洛谷 P4612][COCI 2011-2012#7] Setnja
传送门 TM :setnja (1S256M) 一个人要散步去会见他的 N 个朋友(按给定的顺序会见).我们可以理解成他们都住在一个 很大的网格内,每个朋友住其中的一个单元格,所有人每一步都可以走到相 ...