项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<link rel="Stylesheet" href="jquery.autocomplete.css" />

<script type="text/javascript" src="Jquery-autocomplete.js"></script>

<script type="text/javascript"  src="jquery-1.4.1-vsdoc.js"></script>

<script type="text/javascript" src="autocompelte/jquery.autocomplete-min.js"></script>

<%--

//$(document).ready(function()

//{

//$("#<%=txtUser.ClientID %>").autocomplete("GetCode.aspx",{

// width: 155,

//            selectFirst: true,

//            autoFill: true,

//            minChars: 0,

//            scroll: true,

//            mustMatch: true

//

//            });

//});--%>

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

var emails = [

{ name: "Peter Pan", to: "peter@pan.de" },

{ name: "Molly", to: "molly@yahoo.com" },

{ name: "Forneria Marconi", to: "live@japan.jp" },

{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },

{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },

{ name: "Don Corleone", to: "don@vegas.com" },

{ name: "Mc Chick", to: "info@donalds.org" },

{ name: "Donnie Darko", to: "dd@timeshift.info" },

{ name: "Quake The Net", to: "webmaster@quakenet.org" },

{ name: "Dr. Write", to: "write@writable.com" },

{ name: "GG Bond", to: "Bond@qq.com" },

{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }

];

$(function() {

$('#keyword').autocomplete("GetCode.aspx", {

//                    max: 12,    //列表里的条目数

//                    minChars: 0,    //自动完成激活之前填入的最小字符

//                    width: 400,     //提示的宽度，溢出隐藏

//                    scrollHeight: 300,   //提示的高度，溢出显示滚动条

//                    matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

//                    autoFill: false    //自动填充

////                    formatItem: function(row, i, max) {

////                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';

////                    },

////                    formatMatch: function(row, i, max) {

////                        return row.name + row.to;

////                    },

////                    formatResult: function(row) {

////                        return row.to;

////                    }

//                }).result(function(event, row, formatted) {

//                    alert(row.to);

//                });

//            });

minChars: 0,

max:10,

width: 400,

matchCase:false,//不区分大小写

//  matchContains :true,

// autoFill: false,

scroll: false,

dataType: 'json',

scrollHeight: 500,

//此处为传递参数

extraParams:{v:function() { return $('#keyword').val();}},

//需要把data转换成json数据格式

parse: function(data) {

return $.map(eval(data), function(row) {

return {

data: row,

value: row.Guage,    //此处无需把全部列列出来，只是两个关键列

result: row.Matcode

}

});

},

formatItem: function(data, i, total) {

return "<table><tr><td align='left'>" + data.Guage + "</td><td align='right'> " + data.Unit + " </td></tr></table>";

},

formatMatch: function(data, i, total) {

return data.Guage;

},

formatResult: function(data, value) {

return data.Guage;

}

}).result(function(event, data, formatted) { //回调

$('#keyword').val(data.Matcode);   //不知为何自动返回值后总是加了个“,”,所以改成后赋值

$("#content").val(data.Guage+data.Unit);

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input id="keyword" />

<input id="getValue" value="GetValue" type="button" />

<%--搜索：<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>--%>

</div>

</form>

</body>

</html>

jquery插件autocomplete的更多相关文章

  1. jQuery 插件autocomplete

    jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...

  2. jQuery插件- Autocomplete应用详解

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...

  3. jQuery插件autoComplete使用

    安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...

  4. jQuery插件autoComplete使用详解

    安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...

  5. JQuery插件autocomplete使用说明文档

    项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

  6. jquery插件autoComplete自动弹出

    导入 <link rel="stylesheet" href="${ctx }/static/plugins/jQuery-autoComplete-master/ ...

  7. (jQuery插件)autocomplete插件的简单例子

    1.引入相应的js和css,我用到的时候是在jquery-ui的js里面整合的,ui的css 2.先在html上写一个input <input id="tags" class ...

  8. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  9. GBin1插件推荐之马可波罗（Marco Polo)，jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

随机推荐

  1. MVC4过滤器（转）

    先来看看一个例子演示过滤器有什么用: public class AdminController : Controller { // ... instance variables and constru ...

  2. SQL Server2008知识点总结

    1.SQL Server2008基本服务及功能 2.管理SQL Server2008安全:登录.权限.数据库用户.管理角色.服务器角色.管理数据库角色. 3.数据库管理.表管理(临时表和系统表.列值属 ...

  3. visifire 图表属性样式设置说明，字体，阴影设置

  4. poj1915 BFS

    D - 广搜 基础 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:30000KB     64bi ...

  5. 关于TP的RBAC的使用

    如果你是一个TP的重度使用者的话,请自动略过笔者以下文字 权限管理我在成为一个开发者1年半内,接触过2种,一种就是数学方式 比如我们文件夹权限的755这种权限管理的方式,这种二进制的权限管理的方式 无 ...

  6. apt软件包管理

    apt软件包管理 ----   http://wiki.ubuntu.org.cn/UbuntuHelp:AptGet/Howto/zh APT HOWTO  ----    http://www.d ...

  7. centos 源码安装git

    (1) 添加rpmforge源 wget http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.i686 ...

  8. MathJax测试

    \begin{array}{cc} a & b \\ c & d \end{array} \begin{equation} \int_0^\infty \frac{x^3}{e^x-1 ...

  9. hdu 1535 Invitation Cards

    http://acm.hdu.edu.cn/showproblem.php?pid=1535 这道题两遍spfa,第一遍sfpa之后,重新建图,所有的边逆向建边,再一次spfa就可以了. #inclu ...

  10. DELL配置信息

    CPU详情CPU厂商 英特尔CPU (英特尔)Intel(R) Core(TM) i3 CPU M 370 @ 2.40GHzCPU核心数 2CPU默认频率 2400 MhzCPU外频 533 MHz ...