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式的数组.如下: ...
随机推荐
- 接上一篇,Springcloud使用feignclient远程调用服务404 ,为什么去掉context-path后,就能够调通
一.问题回顾 如果application.properties文件中配置了 #项目路径 server.servlet.context-path=/pear-cache-service 则feigncl ...
- 题解 P1720 【月落乌啼算钱】
题目链接 定义一个函数比较好求. #include<bits/stdc++.h>//万能头文件 using namespace std; double F(int x)//定义函数,为了保 ...
- 虚拟机网络配置,桥接模式和NAT模式
虚拟机网络设置方式的研究: 主要就是桥接网络,和NAT模式: 桥接网络:桥接网络中,相当于虚拟机的网卡和主机的物理网卡均连接到虚拟机软件提供的VMnet0虚拟交换机上,因此虚拟机和主机是平等的,相当于 ...
- ueditor的bug
1)过滤script style标签ueditor.all.jsallowDivTransToP:false ueditor.config.js,allowDivTransToP:false //允许 ...
- centos7用docker安装单节点redis4.0.11
[root@localhost conf]# docker search redisINDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATEDdocker.io d ...
- NPOI.XWPF生成WORD,设置Table单元格的背景色
tr.GetCell().SetColor("#fbd4b4");
- c语言数据结构学习心得——图
图G由顶点集V和边集E组成,记为G=(V,E) 图不可为空,一定有顶点集不为空 有向图:有向边(弧)的有限集合 无向图:无向边的有限集合 连通:顶点V到顶点V'有路径 连通分量:无向图中的极大连通子图 ...
- 使用window.name 进行数据跨域传递
其中要点, Stpe1,浏览器在Iframe中加载一个异域的页面,这个页面返回 <script>window.name="任何数据"</script>,这时 ...
- springcloud微服务config的使用
首先需要建立一个server端: pom依赖中加入 <dependency> <groupId>org.springframework.cloud</groupId> ...
- Qt 学习之路 2(72):线程和事件循环
Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻> -- 有需求的话还需要进行专题学习 豆子 2013年11月24日 Qt 学习之路 2 34条评论 前面一章我 ...