jQuery自动补全

jquery-autocomplete配置:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

一个稍微复杂的例子,可以自定义提示列表:

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title>自定义提示</title>
 4     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 5     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
 6     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
 7     <script type="text/javascript">
 8         var emails = [
 9             { name: "Peter Pan", to: "[email protected]" },
10             { name: "Molly", to: "[email protected]" },
11             { name: "Forneria Marconi", to: "[email protected]" },
12             { name: "Master <em>Sync</em>", to: "[email protected]" },
13             { name: "Dr. <strong>Tech</strong> de Log", to: "[email protected]" },
14             { name: "Don Corleone", to: "[email protected]" },
15             { name: "Mc Chick", to: "[email protected]" },
16             { name: "Donnie Darko", to: "[email protected]" },
17             { name: "Quake The Net", to: "[email protected]" },
18             { name: "Dr. Write", to: "[email protected]" },
19             { name: "GG Bond", to: "Bond[email protected]" },
20             { name: "Zhuzhu Xia", to: "[email protected]" }
21         ];
22 
23             $(function() {
24                 $(‘#keyword‘).autocomplete(emails, {
25                     max: 12,    //列表里的条目数
26                     minChars: 0,    //自动完成激活之前填入的最小字符
27                     width: 400,     //提示的宽度,溢出隐藏
28                     scrollHeight: 300,   //提示的高度,溢出显示滚动条
29                     matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
30                     autoFill: false,    //自动填充
31                     formatItem: function(row, i, max) {
32                         return i + ‘/‘ + max + ‘:"‘ + row.name + ‘"[‘ + row.to + ‘]‘;
33                     },
34                     formatMatch: function(row, i, max) {
35                         return row.name + row.to;
36                     },
37                     formatResult: function(row) {
38                         return row.to;
39                     }
40                 }).result(function(event, row, formatted) {
41                     alert(row.to);
42                 });
43             });
44     </script>
45 </head>
46 <body>
47     <form id="form1" runat="server">
48     <div>
49         <input id="keyword" />
50         <input id="getValue" value="GetValue" type="button" />
51     </div>
52     </form>
53 </body>
54 </html>

时间: 2024-08-10 11:32:29

jQuery自动补全的相关文章

非常好用的JQuery自动补全插件bigautocomplete

自动补全插件,有些功能有限,有些是老外做的,不支持中文.今天发现一个国人做的,叫做bigautocomplete,还不错. 官网下载地址:http://code.google.com/p/jquery-bigui/downloads/list 如果不想翻墙的话,可以从这里下载(已经转码为UTF-8):http://download.csdn.net/detail/clementad/8917219 使用步骤: 1.把两个js和css文件放到项目中: 2.在项目页面中引用: <script src

jquery 自动补全插件源码

/* 自动补全插件 */!function($){ $.fn.extend({ autocomplete:function(arr,max){ return new $.Autocomplete(this,arr,max);//如果有,就首先生成一个 } }); //构造函数 $.Autocomplete = function(input,arr,max){ this.option = {}; this.option.data = arr;//数据 this.option.max = max;

jQuery自动补全插件使用,三种获取数据源方式

jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式. 主要参数: Source:数据源,类型为String.Array.Function,其中String为ajax请求的服务器端地址,返回Array/JSON格式,Array即为数组,静态定义到页面中的数据,下面会有具体的  demo, Function(request,response):通过request.term获得

solr进阶七:与jQuery结合的自动补全功能

网上有大量的jQuery自动补全功能的插件,我实现这个功能是采用网友写好的纯jQuery代码,而不是采用插件,因为特效会差很多.而后台的数据是从solr那边获取过来,通过整理,放到对象中,再放到集合中,然后在servlet层解开,生成xml文件,返回到前台,形成自动提示补全的功能,流程非常简单,没有采用框架技术,只是用了JSP的servlet来做中间层而已. 目录结构如下: 1.先编写实体类src\com\lifeix\entity\Word.java package com.lifeix.en

jquery的输入框自动补全功能+ajax

jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链接找不到了,但是感谢分享! 效果图: 涉及到ajax请求我这里本地请求不到数据就先放测试代码,在文章的最后会放上ajax代码: 用来测试的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset

jquery ui 学习随笔 自动补全

一.调用autocomplete()方法 $('#email').autocomplete({ source : ['[email protected]', '[email protected]', '[email protected]'], }); 二.修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式.我们通过Firebug 想获取到悬停 时背景的样式,可以直接通过jquery.ui.css 里面找相应的CSS. //无须修改ui 里的CSS

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar

jquery mutilselect 插件添加中英文自动补全

jquery mutilselect默认只能根据设置的option来进行自动提示 $.each(availableTags, function(key, value) { $('#channels') .append($("<option></option>") .attr("value",value) .text(value)); //默认按text中的value来自动提示 }); 阅读下面的需求: 有这么几个选项: 北京 天津 湖北 输入

jquery.autocomplete 自动补全 应用

下拉自动补全的js控件还是很多的,不过好多都被集成在N多组件之一了,像Jquery.easyui,jquery.chonsen等等都可以实现类似的功能.但我想要的是是一款简单轻巧,应用于整个系统的js. 于是我选择了jquery.autocomplete.js,基本参数注解参考:http://www.cnblogs.com/EWall/archive/2011/04/28/2031613.html,JS及相关CSS可在google code下载,链接https://code.google.com