<%@ page isELIgnored="false"%>

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ page import="com.sunny.common.utils.StringUtil"%>

<%@ include file="/common/taglibs.inc"%>

<%@ page import="com.sunny.base.Convertutf"%>

<html>

    <head>

        <title>商品管理</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    

    <link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/jquery.ui.all.css">

    <script src="/newver/js/jqueryAutocomplete/jquery-1.10.2.js"></script>

    <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.core.js"></script>

    <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.widget.js"></script>

    <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.position.js"></script>

    <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.menu.js"></script>

    <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.autocomplete.js"></script>

    <link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/demos.css">

     <script  type="text/javascript"  language=javascript>

        $(function() {

            function diseaseLabel( message ) {

                $( "<div>" ).text( message ).prependTo( "#diseaseLabel" );

                $( "#diseaseLabel" ).scrollTop( 0 );

            }

            $( "#tags" ).autocomplete({

                source: function( request, response ) {

                    $.ajax({

                        url: "merchandise!JibingList.html2",

                        dataType: "json",

                        data: {

                            name_startsWith: request.term

                        },

                        success: function( data ) {

                            response( $.map( data, function( item ) {

                                return {

                                    label: item.name

                                }

                            }));

                        }

                    });

                },

                minLength: 2,

                select: function( event, ui ) {

                    // $("#diseaseLabel").val(ui.item.value);

                    diseaseLabel( ui.item ?

                        "Selected: " + ui.item.value :

                        "Nothing selected, input was " + ui.item.value);

                },

                open: function() {

                    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );

                },

                close: function() {

                    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );

                }

            });

        });

        </script>

        </head>

        <body>

        <div class="ui-widget">

    <label for="city">Your city: </label>

    <input id="city">

    Powered by <a href="http://geonames.org">geonames.org</a>

</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">

    Result:

    <div id="diseaseLabel" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>

</div>

    </body>

</html>

jquery autocomplete插件结合ajax使用的更多相关文章

  1. Jquery autocomplete 插件示例

    通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. jquery autocomplete插件

    jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...

  4. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  5. 使用 jQuery Mockjax 插件模拟 Ajax 请求

    在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...

  6. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  7. jquery autoComplete 插件

    github: https://github.com/Pixabay/jQuery-autoComplete/blob/master/demo.html 官网demo https://goodies. ...

  8. Jquery autocomplete 插件使用

    轻松实现类似百度输入框联想功能: autocomplete 是一个很厉害的插件,该插件基于jquery,在jquery官网能下载到最新版本. 首先,jQuery UI 是基于 jQuery 的,所以, ...

  9. jquery autocomplete 插件的使用

    Autocomplete 自动完成 功能:输入框在输入关键字后,根据输入的内容给出相关的下拉框供用户选择,自动完成输入内容. 插件:使用jqueryUI的自动完成小部件,文档地址:https://jq ...

随机推荐

  1. MATLAB学习笔记（五）——MATLAB绘图

    (一)二维数据曲线图 一.绘制单根二维曲线 1.基本调用格式 plot(x,y) (1)x,y为长度相同的向量,分别用于储存x坐标和y坐标数据 (2)用于绘制以x,y为横,纵坐标的二维曲线. (3)举 ...

  2. spring实战六之使用基于java配置的Spring

    之前接触的都是基于XML配置的Spring,Spring3.0开始可以几乎不使用XML而使用纯粹的java代码来配置Spring应用.使用基于java配置的Spring的步骤如下: 1. 创建基于ja ...

  3. DP ZOJ 3872 Beauty of Array

    题目传送门 /* DP:dp 表示当前输入的x前的包含x的子序列的和, 求和方法是找到之前出现x的位置(a[x])的区间内的子序列: sum 表示当前输入x前的所有和: a[x] 表示id: 详细解释 ...

  4. 最短路(Dijkstra) POJ 1062 昂贵的聘礼

    题目传送门 /* 最短路:Dijkstra算法,首先依照等级差距枚举“删除”某些点,即used,然后分别从该点出发生成最短路 更新每个点的最短路的最小值 注意:国王的等级不一定是最高的:) */ #i ...

  5. ZOJ2332 Gems（最大流）

    题目大概说,alsomagic有宝石,宝石有颜色和形状两个属性:他有一种法力可以将某些颜色形状的宝石转化成另一种颜色形状的宝石:他的女朋友对各个颜色都有一定的容忍数量,而他自己也对各个形状都有一定的容 ...

  6. BZOJ3461 : Jry的时间表

    fl[i]表示[1,i]操作一次,且在[j+1,i]处操作的最大值 1:把[j+1,i]改为b[i]: max(sum[j]+b[i]*(i-j)) =b[i]*i+max(-j*b[i]+sum[j ...

  7. Flexbox——快速布局神器

    Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...

  8. winrt 上的翻书特效组件 源码分享 转载请说明

    http://blog.csdn.net/wangrenzhu2011/article/details/10207413 (转) [TemplatePart(Name = A_PARTNAME, Ty ...

  9. [Cocos2d-x For WP8]Transition 场景切换

    在游戏中通常会打完了一关之后就会从当前的场景转换到另外一关的场景了,在Cocos2d-x中是由CCScene类表示一个场景.那么场景(CCScene)是为游戏中的精灵(CCSprite)提供了舞台,场 ...

  10. Html A标签中 href 和 onclick 同时使用的问题 优先级别

    我们在制作网页的时候用得最多的就是 A 标签 超连接 但有时候需要在 A 里同时用到 href 和 onclick属性 下面我们先来分析一下 ,在不同的浏览器下有不同的效果 1 顺序 ie 6 : h ...