本文实例讲述了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程序设计有所帮助。
本文向大家介绍Jquery的autocomplete插件用法及参数讲解,包括了Jquery的autocomplete插件用法及参数讲解的使用技巧和注意事项,需要的朋友参考一下 参数说明: * minChars (Number): 在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表 * width (Number)
本文向大家介绍jQuery弹出层插件popShow用法示例,包括了jQuery弹出层插件popShow用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1、引入JS和CSS文件 注意:这里需要引入JQuery库文件。 2、编写HTML代码 3、popShow的使用
主要内容:实例演示jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符,用户可以过滤列表以获得更好的匹配。 该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。 访问 jQuery Autocomp
jQuery AutoComplete 是一个用来实现输入框自动完成功能的jQuery插件。
本文向大家介绍jQuery弹出层插件popShow(改进版)用法示例,包括了jQuery弹出层插件popShow(改进版)用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考,具体如下: 前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法,这里再对插件进行一番改进。 popS
本文向大家介绍jQuery自适应轮播图插件Swiper用法示例,包括了jQuery自适应轮播图插件Swiper用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: 关于swiper的内容读者可参考相关网站:http://www.swiper.com.cn/download/
本文向大家介绍jquery自动补齐功能插件flexselect用法示例,包括了jquery自动补齐功能插件flexselect用法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery自动补齐功能插件flexselect用法。分享给大家供大家参考,具体如下: 这几天正在做一个东东。需要用到自动补齐的功能。也就是select控件的文本项可以让它写。默认的select文本框是只读的,
这是一个用来在文本输入框中实现自动完成的jQuery插件。 主要的功能有: 使用和配置简单; 支持Ajax动态加载数据; 可滚动的结果集; 支持多个自动完成建议; 支持各种流行的浏览器; 支持bdIframe