1. <%@ page isELIgnored="false"%>
  2. <%@ page contentType="text/html; charset=UTF-8"%>
  3. <%@ page import="com.sunny.common.utils.StringUtil"%>
  4. <%@ include file="/common/taglibs.inc"%>
  5. <%@ page import="com.sunny.base.Convertutf"%>
  6. <html>
  7.     <head>
  8.         <title>商品管理</title>
  9.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  10.  
  11.     <link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/jquery.ui.all.css">
  12.     <script src="/newver/js/jqueryAutocomplete/jquery-1.10.2.js"></script>
  13.     <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.core.js"></script>
  14.     <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.widget.js"></script>
  15.     <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.position.js"></script>
  16.     <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.menu.js"></script>
  17.     <script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.autocomplete.js"></script>
  18.  
  19.     <link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/demos.css">
  20.  
  21.      <script  type="text/javascript"  language=javascript>
  22.  
  23.         $(function() {
  24.             function diseaseLabel( message ) {
  25.                 $( "<div>" ).text( message ).prependTo( "#diseaseLabel" );
  26.                 $( "#diseaseLabel" ).scrollTop( 0 );
  27.             }
  28.  
  29.             $( "#tags" ).autocomplete({
  30.                 source: function( request, response ) {
  31.                     $.ajax({
  32.                         url: "merchandise!JibingList.html2",
  33.                         dataType: "json",
  34.                         data: {
  35.                             name_startsWith: request.term
  36.                         },
  37.                         success: function( data ) {
  38.                             response( $.map( data, function( item ) {
  39.                                 return {
  40.                                     label: item.name
  41.                                 }
  42.                             }));
  43.                         }
  44.                     });
  45.                 },
  46.                 minLength: 2,
  47.                 select: function( event, ui ) {
  48.  
  49.                     // $("#diseaseLabel").val(ui.item.value);
  50.  
  51.                     diseaseLabel( ui.item ?
  52.                         "Selected: " + ui.item.value :
  53.                         "Nothing selected, input was " + ui.item.value);
  54.                 },
  55.                 open: function() {
  56.                     $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  57.                 },
  58.                 close: function() {
  59.                     $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  60.                 }
  61.             });
  62.         });
  63.  
  64.         </script>
  65.         </head>
  66.         <body>
  67.  
  68.         <div class="ui-widget">
  69.     <label for="city">Your city: </label>
  70.     <input id="city">
  71.     Powered by <a href="http://geonames.org">geonames.org</a>
  72. </div>
  73.  
  74. <div class="ui-widget" style="margin-top:2em; font-family:Arial">
  75.     Result:
  76.     <div id="diseaseLabel" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  77. </div>
  78.  
  79.     </body>
  80. </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. Insert select 带选择复制一张表到另一张表

    使用SELECT INTO 和 INSERT INTO SELECT 表复制语句了. 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,fi ...

  2. js:数据结构笔记3--栈

    栈是一种特殊的列表,数据结构为LIFO: 定义: function Stack() { this.dataStore = []; this.top = 0; this.push = push; thi ...

  3. Xamarin Android长度单位区别

    Xamarin Android长度单位区别 Android中长度单位有6种:px.in.mm.pt.dp/dip.sp.其中,px表示显示设备的一个像素:in表示显示设备的1英寸:mm表示显示设备的1 ...

  4. Python 中文Key 报错问题

    例如: # -*- coding=UTF-8 -*- import json data = [] with open('data.json') as f: for line in f: data.ap ...

  5. 线段树 Codeforces Round #197 (Div. 2) D. Xenia and Bit Operations

    题目传送门 /* 线段树的单点更新:有一个交叉更新,若rank=1,or:rank=0,xor 详细解释:http://www.xuebuyuan.com/1154895.html */ #inclu ...

  6. LightOJ1316 A Wedding Party（状压DP）

    这题事实上只需要关心15个商店和一个起点一个终点,预处理出这几个点之间的最短距离.Floyd会超时,用Dijkstra即可. 然后就是dp[u][S]表示已经经过商店集合S且当前在第u个商店所花的最少 ...

  7. Matrix Chain Multiplication[HDU1082]

    Matrix Chain Multiplication Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  8. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  9. Graph database_neo4j 底层存储结构分析(4)

    3.3.2   DynamicStore 类型 3.3.2.1        AbstractDynamicStore 的存储格式 neo4j 中对于字符串等变长值的保存策略是用一组定长的 block ...

  10. CustomValidator验证的使用方法

    <asp:TextBox ID="txtNum" runat="server" Width="400px" ></asp: ...