jquery插件autocomplete用法示例

本文实例讲述了jquery插件autocomplete用法。分享给大家供大家参考，具体如下：

(1)引入js和样式

<script type="text/JavaScript" src="../js/jQuery-1.8.0.js"
charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery.autocomplete.js"
charset="utf-8"></script>
<link href="css/jquery.autocomplete.css" rel="Stylesheet">

(2)autocomplete的前台js

<script type="text/javascript">
//alert("test");../search/fuzzy/pkword.html
$(document).ready(function() {
var kw ="";
$("#kw").blur(function (){
kw = $("#kw").val();
});
$("#kw").autocomplete("search/fuzzy/pkword.html",
//请求的后台路径
{
parse : function(jsonData) {
var parsed = [];
for ( var i = 0; i < jsonData.length; i++) {
parsed[parsed.length++] = {
data : jsonData[i],
value : jsonData[i].catalogName,
result : jsonData[i].catalogName
};
//对后台返回的json进行格式转换
}
return parsed;
},
formatItem : function(row,i,max) {
var item = "<table id='auto"
+ i
+ "'class='a' style='width:100%;'> <tr><td align='left'>在<font color='red'>"
+ row.catalogName
+ "</font>分类中搜索</td><td align='right' style='color:green;'>约"
+ row.catalogCount
+ "结果</td></tr></table>";
return item;
//autocomplete提示时的格式
}
}).result(function(even,item){
var catalogName=item.catalogName;
window.open("productList/fuzzySearch/"+catalogName+"/"+kw+".html?page=1","_blank");
//鼠标点击时的事件
});
});
</script>

(3)后台json用springmvc返回

@ResponseBody
@RequestMapping(value = "/search/fuzzy/pkword.html", method = RequestMethod.GET)
public List<CatalogCountBean> fuzzySearch(@RequestParam String q) {
List<CatalogCountBean> list = null;
System.out.println("q:" + q);
list = (List<CatalogCountBean>) productListService.fuzzySearch(
productListNamespace, q);
return list;
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

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

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

    我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo

  • jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

    本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法.分享给大家供大家参考,具体如下: 一.一次加载.多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET", url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), dataType:"j

  • jquery autocomplete自动完成插件的的使用方法

    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

  • jquery自动完成插件(autocomplete)应用之PHP版

    于工作中需要用到自动提示这个功能,呵呵,自己又是js小菜,于是百度了一下,找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能,于是down下来了改成了php版的,并加了支持向上/向下选择文字等功能,放上来共享一下,纯体力活... :) 1.下载jquery库,网址:http://jquery.com/ : 2.下载jquery autocomplete插件或者直接使用我附件里提供的文件,自己下载下来的文件需要修改一些内容才能支持向上/向下选择文字.解决中文乱码,

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • 小试JQuery的AutoComplete插件

    前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

    主要修改了两个地方: 一.上下选择与输入值同步问题. 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步.插件是老外写的,可能他没有考虑到这一点. 二.修正了在firefox下中文输入,没有激活自动提交的问题. 老外当然不会用到中文输入,这个bug存在也理所当然了. 另:附件里的实现了选择后自动提交,也就和google.百度的效果完全一样了. 下载地址

  • jQuery Autocomplete自动完成插件

    相对于同类插件,他的特色有3点. 1.可缓存查询结果 (二次查询速度快) 2.非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题) 3.简洁的参数 (好看?) 插件性能尚好,我的E6500.2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒:百度的是2432次调用,80.24毫秒. 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教. 调用方法 复制代码 代码如下: jQuery("#kw").suggest

  • jquery插件autocomplete用法示例

    本文实例讲述了jquery插件autocomplete用法.分享给大家供大家参考,具体如下: (1)引入js和样式 <script type="text/JavaScript" src="../js/jQuery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="../js/jquery.aut

  • jquery插件bxslider用法实例分析

    本文实例讲述了jquery插件bxslider用法.分享给大家供大家参考.具体用法如下: 首先调用对应js文件: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> jQuer

  • jQuery自适应轮播图插件Swiper用法示例

    jQuery自适应轮播图插件Swiper用法示例

    本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • 超好用的jQuery分页插件jpaginate用法示例【附源码下载】

    超好用的jQuery分页插件jpaginate用法示例【附源码下载】

    本文实例讲述了jQuery分页插件jpaginate用法.分享给大家供大家参考,具体如下: jpaginate是一个自带滑动动画效果的jQuery分页插件,用户可以通过单击或只是悬停在箭头上的使页码滑动显示. 你可以用下面的方式调用插件: $(elementID).paginate() 您可以通过一下属性来配置插件: count:页面总数 start:默认选中页码 display:可见页码数量 border:边框(true/false) border_color:边框颜色: text_color

  • jQuery md5加密插件jQuery.md5.js用法示例

    jQuery md5加密插件jQuery.md5.js用法示例

    本文实例讲述了jQuery md5加密插件jQuery.md5.js用法.分享给大家供大家参考,具体如下: 使用方法: $.(md5("你想要加密的字符串")); jquery.md5.js插件代码: /** * jQuery MD5 hash algorithm function * * <code> * Calculate the md5 hash of a String * String $.md5 ( String str ) * </code> * *

  • jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <lin

  • jQuery弹出层插件popShow用法示例

    jQuery弹出层插件popShow用法示例

    本文实例讲述了jQuery弹出层插件popShow用法.分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <script src="/js/common/jquery.min.js" type="text/javascript

  • jquery自动补齐功能插件flexselect用法示例

    本文实例讲述了jquery自动补齐功能插件flexselect用法.分享给大家供大家参考,具体如下: 这几天正在做一个东东.需要用到自动补齐的功能.也就是select控件的文本项可以让它写.默认的select文本框是只读的,不能写.在网上找到一个jQuery插件:flexselect可以完成这项功能. 将插件放到项目里.然后在页面中引用这个插件. <script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2

  • jQuery简单自定义图片轮播插件及用法示例

    jQuery简单自定义图片轮播插件及用法示例

    本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

  • jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

    jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】

    本文实例讲述了jQuery图片前后对比插件beforeAfter用法.分享给大家供大家参考,具体如下: 今天分享一款 jquery 插件--图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>图片前后对比</title> </head&g

随机推荐