通过id取input标签对象,调用autocomplete方法
var sources = [
"ActionScript",
"AppleScript",
"Asp",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(function() {
$( "#tags" ).autocomplete({
source:sources
});
});
{source:sources}将多个sources的String类型数组,包装成JSON.
Ajax服务器端完成:
服务器端网页的Java代码,也只有java代码.
String query = request.getParameter("term");//获取要匹配的参数
String[] sources = {"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"};
StringBuilder builder = new StringBuilder("[");
for(int i=0;i
if(null != query){
if(sources[i].indexOf(query) >= 0){//表示如果输入了query,sources[i]的String包含String query
builder.append("{\"label\":\""+sources[i]+"\"},");//拼接成{"label":sources[i]}的JSON数据
}
}else{//如果不输入query,返回所有的sources[i]成为JSON数组.
builder.append("{\"label\":\""+sources[i]+"\"},");
}
}
String result = builder.toString();//转换为字符串.
if(result.endsWith(",")){//因为拼接的结果转换成字符串后,数组内会多出","
result = result.substring(0,result.length()-1);//需要截去最后一个逗号.
}
result+="]";//拼接"]"
out.print(result);
script:
$(function() {
$( "#tags" ).autocomplete({
source:function(request,response){
//request.term估计是将input内容提交后的字符串."term='字符串'",其实等价于传入一个
//{"term":"字符串"}的JSON数据. 具体在jQuery1.11.10的帮助文档中有所描述,搜get第二个即是.
$.get("server/demo4_server.jsp","term="+request.term,function(data){
//url(目标地址),data(传入数据),callback(回调函数)
var result = $.parseJSON(data);
response(result);// 输出返回结果
});
}
});
});
parseJSON(String strJSON)函数:
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
JQuery easyui里面的自动完成autocomplete插件
默认功能 当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议.在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 ...
使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
编译原理(简单自动词法分析器LEX)
编译原理(简单自动词法分析器LEX)源程序下载地址: http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...
Awesomplete - 零依赖的简单自动完成插件
Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...
Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
jquery autocomplete 简单实用例子
datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
Ajax向服务器端发送请求
Ajax向服务器端发送请求 Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代 ...
随机推荐
浅谈Excel开发:十 Excel 开发中与线程相关的若干问题
采用VSTO或者Shared Add-in等技术开发Excel插件,其实是在与Excel提供的API在打交道,Excel本身的组件大多数都是COM组件,也就是说通过Excel PIA来与COM进行交互 ...
python-unicode十进制数字转中文
#coding:utf-8 '''主要是unichr()函数.以下数组中的元素转换后为繁体中文,若不加encode("GB18030")就不能正确显示,而且会报错:('gbk' c ...
Web网站压力测试工具
使用Microsoft Web Application Stress Tool对web进行压力测试 不错关于压力测试博客: http://blog.sina.com.cn/s/blog_5155e8d ...
问题-在TreeView使用时,发现选中的树节点会闪烁或消失
问题:在工程中选中一个树节点,鼠标焦点在树上,做某种操作时发现选中的点会消失?原因:如果只是BeginUpdate后,没有调用EndUpdate,树会全空.应该是BeginUpdate方法会刷新树,但 ...
Android学习笔记:多个AsyncTask实例的并发问题
AsyncTask是Android给开发者提供的一个简单轻量级的多线程类,通过它我们可以很容易新建一个线程让在后台做一些耗时的操作(如IO操作.网络访问等),并在这个过程中更新UI.之所以说它轻量级, ...
J2SE基础:7.系统经常使用类一
1.Object对象 Object对象是全部对象的根类. 每一个对象都默认继承自Object类. equals():对象与对象之间是否相等. 逻辑上面的相等.equals 物理上面的相等(地址相等) ...
借助扩展事件查看SQL 2016备份和还原操作的内幕
当遇到备份或者还原操作占用较长时间时,很多人会问: 备份/还原是不是僵死了?要不要kill掉,再重来? 到底是哪一个部分的操作占用较长时间? 到底现在进行到什么阶段了? 在SQL 2016 之前,要回 ...
mysql(4)—— 表连接查询与where后使用子查询的性能分析。
子查询就是在一条查询语句中还有其它的查询语句,主查询得到的结果依赖于子查询的结果. 子查询的子语句可以在一条sql语句的FROM,JOIN,和WHERE后面,本文主要针对在WHERE后面使用子查询与表 ...
IntelliJ IDEA 2017版 spring-boot2.0.4+mybatis反向工程;mybatis+springboot逆向工程
一.搭建环境 采用IDE自动建立项目方式 然后,next next,配置导入依赖包 项目就生成了,在项目下导入配置文件GeneratorMapper.xml(项目结构如图所示) 配置文档,建立数据库和 ...
微信小程序 - tabbar动态更换图标以及文字
大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...