通过id取input标签对象,调用autocomplete方法

<script>

    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

        });

    });

</script>

<body>

    <div class="ui-widget">

        <h2>查询：<input id="tags"></h2>

    </div>

</body>

{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<sources.length;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)函数:

[easyUI] autocomplete 简单自动完成以及ajax从服务器端完成的更多相关文章

  1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  2. JQuery easyui里面的自动完成autocomplete插件

    默认功能 当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议.在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 ...

  3. 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  4. 编译原理（简单自动词法分析器LEX）

    编译原理(简单自动词法分析器LEX)源程序下载地址:  http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...

  5. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  6. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  7. jquery autocomplete 简单实用例子

    <link href="../../themes/default/css/jquery.ui.all.css" rel="stylesheet" type ...

  8. datatables.js 简单使用--多选框和服务器端分页

    说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...

  9. Ajax向服务器端发送请求

    Ajax向服务器端发送请求 Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代 ...

随机推荐

  1. css学习_css定位

    1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute  (拼爹型: ...

  2. virtualenv与virtualenvwrapper虚拟环境

    python开发之virtualenv与virtualenvwrapper讲解 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物 ...

  3. Docker入门2------容器container常规操作

    参考转自 https://www.cnblogs.com/jsonhc/p/7760144.html Docker的container 运行一个container的本身就是开启一个具有独立namesp ...

  4. .net 调用python 实例

    如标题 ,python属于解释型语言,所以直接将python的文件copy到项目中 新建.net控制台应用程序,直接nuget  IronPython 安装成功后 在项目内新建Sum文件夹,将py.p ...

  5. linux 通过pid 寻找程序路径的最简单命令(pwdx)

    在linux实际操作命令中,查看pid的方式有很多种,通过pid找程序路径的方式也有好几个,但是可能大家都忽略的一个很简单也是很实用的命令:pwdx. 比如要查找某个java编写的程序运行情况可通过j ...

  6. A标签中 href 和 onclick用法、区别、优先级别

    (内容摘自:https://blog.csdn.net/chenchunlin526/article/details/77346049) Html A标签中 href 和 onclick 同时使用的问 ...

  7. python基础之 基本数据类型,str方法和for循环

    1.概念 1.十进制转二进制,对2取余,余数倒序排列 2.字符串为空的时候,bool值为false,字符串非空就是True3.字符串转化成int时,必须是只包含数字才能转化.4.字符串转化成int时可 ...

  8. windows程序设计 显示一个窗口

    #include <windows.h> HINSTANCE hinst; LRESULT CALLBACK MainWndProc(HWND, UINT, WPARAM, LPARAM) ...

  9. OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化

    需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...

  10. m2e-wtp的作用

    描述 Maven3下的项目结构,target目录下会有一个m2e-wtp文件夹,删除掉会自动生成,有什么作用呢? wtp解释 WTP:Web Tools Project Maven集成WTP The ...