autocomplete及Ajax,[easyUI] autocomplete 简单自动完成以及ajax从服务器端完成

于 2021-08-06 09:57:36 发布
阅读量508 收藏
点赞数
文章标签： autocomplete及Ajax

通过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)函数:

68fe659a7edd29d23c404293fc5bddb7.png

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基础调试以后就推出了更新方 ...

weixin_39992199
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java autocomplete ajax_JQuery之autocomplete结合ajax实现自动完成功能
weixin_35432846的博客
02-26 313
autocomplete是jqueryui里的一个插件，作用类似于搜索时的自动提示功能。使用autocomplete时除了要引用jQuery和jQueryUI之外，还要引入jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js。demo：$('input[name=\'tag\']').autocomplete({delay: 500...
[easyUI] autocomplete 简单自动完成以及ajax从服务器端完成
weixin_30389003的博客
06-24 294
　　通过id取input标签对象,调用autocomplete方法 <script> var sources = [ "ActionScript", "AppleScript", "Asp", "COBOL", "ColdFusion", ...
autocomplete ajax 使用
weixin_33834628的博客
07-28 216
$('#client').autocomplete("${path...
EasyUI 插件 jquery.autocomplete 自动检索 + js、css包
xinjiatao的专栏
04-20 843
  var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", ...
JS 自动完成 AutoComplete(Ajax 查询)
12-11
一：JS 部分 代码如下://******************************************************** //创建日期: 2009-03-10 //作 者: oloen //內容说明:　自动完成JS类 //用法： // var auto = new autoComplete(客户端ID);...
Vue Autocomplete 自动完成功能简单示例
10-16
Vue Autocomplete 是 Vue.js 框架中一个用于实现自动完成功能的组件，它能够帮助用户在输入框中快速找到并选择匹配的选项。在本示例中，我们将探讨如何利用 `el-autocomplete` 组件来实现这一功能，并通过实际代码...
jquery easyui TagBox with Autocomplete ajax请求方式自动填充
07-08
在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中，主要涉及了jQuery EasyUI的TagBox组件，以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件，...
JS实现的一个简单的Autocomplete自动完成例子
10-26
主要介绍了JS实现的一个简单的Autocomplete自动完成例子,需要的朋友可以参考下
jQuery ui autocomplete 与easyUI冲突解决办法（重命名ui的autocomplete 和menu部分）
LI5566123456的博客
12-12 260
http://jqueryui.com/download/ UI定制只选autocomplete 会自动把依赖的menu模块也加入进来……然而easyUI也有自己的menu，于是就…… 折腾了好久摸索的解决方法—— UI的.menu替换成.mulu_kk; autocomplete中的menufocus替换成mulu_kkfocus; autocomplete中的menuse...
jquery文本框自动补全完整实例 ajax autocomplete
09-21
jquery文本框自动补全完整实例 ajax autocomplete
autocomplete:来自 ajax (jQuery) 的自动完成结果
06-25
自动完成 使用来自数据库 utf-8 支持的搜索栏时自动完成结果 $(选择器).自动完成(); 您可以使用选项： mkmap：布尔显示文件夹 选项 价值 默认 网址 脚本链接提出请求 php/search.php 参数名称 PHP 脚本使用的 GET 或 POST 参数 搜索 显示所有 布尔值显示焦点上的所有值 错误的 打回来 指向函数的指针第一个参数是结果第二个参数是指向自动完成包装器的指针 空值 清除 按下清除按钮时的函数调用 空值 班级名称 突出显示元素时的类名（不带点） 选择自动完成（在 style.autocomplete.css 中定义） 最大值 结果显示的最大数量设置为null以禁用限制（会降低性能 10 文件夹 错误的 没有结果 没有结果时的文本显示 没有结果 钥匙 参数数组 空值 价值 值数组param1=value1¶m2=value2... 空值 例子 ：
Ajax-autocomplete.zip
09-17
Ajax-autocomplete.zip,远程数据源的简单自动完成库。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
jquery插件示例(autocomplete+ingrid+dataTables)(asp.net)
08-28
这个是我在学习jquery过程中积累下来的一点东西.有些示例在我前面上传的资源中已经有了.里面都是一些入门性的示例.数据库采用的SQLServer2000的northwind数据库.数据访问用了Enterprise library DAAB;虽然只是简单的数据访问,也算是一个示例吧.大家不要见笑,呵呵.里面还有一个kindeditor ,html编辑器的示例.这个是我挑选了N个编辑器之后决定使用的,轻巧,免费.可定制性强.QQ:168765155.大家一起研究.
java swing 自动补全_扩展easyui的combobox组件的自动完成（autocomplete）
weixin_29100927的博客
03-04 209
update:现有有easyui插件直接提供了该功能。可以请参考：http://www.easyui-extlib.com/ 里面combobox的根据拼音自动显示。里面各种插件造福大家。——————————————————————————————————————————easyui的combobox自带的自动完成，只能从第一个字符开始匹配，如果我想通过用户姓名的简拼或者中文名来匹配的话，就需要自...
AJAX扩展控件AutoComplete(自动提示功能)的使用方法总结
zjj780320380的专栏
05-11 1156
这控件需要写一个webService的方法，供这个控件调用！页面代码：                                                         TargetControlID ="TextBox1"//要出现提示的控件             ServicePath = "WebService.asmx"//要调用的服务的路径（和页面在同一目录下
autocomplete ajax,JS 自动完成 AutoComplete(Ajax 查询)_javascript技巧
weixin_34805229的博客
08-06 338
一：JS 部分//********************************************************//创建日期: 2009-03-10//作 者: oloen//內容说明:　自动完成JS类//用法：// var auto = new autoComplete(客户端ID);// auto.Init(document.all.客户端ID);// auto.Type =...
autocomplete+ajax+json实现自动补全功能
Keima的博客
05-24 3684
由于项目需要做自动补全功能，所以去学习使用autocomplete 先看公司原来的写法，使用 $("#projectName").autocomplete("../Handler/getCodeProject.ashx", countryOption).result(function (event, row, formatted) { cCo
EASYUI COMBOBOX 自动补齐功能
sunyiban的专栏
12-16 512
$("#businessDepartment").combobox({ valueField : 'code', textField : 'text', url:"orgz/organizationAction!findOrganizationDept.action?treeLevel=05", method:"get", filter: function(q, row){
el-autocomplete 自动换行
最新发布
10-06
el-autocomplete 组件默认不支持自动换行，但可以通过一些 CSS 样式来实现自动换行的效果。你可以通过设置 el-autocomplete 组件的父容器的样式来实现自动换行，例如设置父容器的 white-space 属性为 "normal" 或 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值