项目中有时会用到自动补全查询，就像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. oracle 11g 64位安装32位客户端和PL/SQL

    转自:http://www.360doc.com/content/14/0602/10/4903283_382949382.shtml   这个你需要安装一个32位的oracle客户端才能使用plsq ...

  2. Oracle 10g体系结构及安全管理

    (1)               Oracle数据库服务器:数据库,实例 (2)               数据库:(1)物理存储—数据文件,控制文件,日志文件,(2)逻辑存储—表空间,段,区间, ...

  3. Altium Designer 生成 Mach3 G代码的程序

    Altium Designer做PCB设计,还是很方便的,最近头脑发热,在网上买了一套CNC机床,用来做钻孔用,但是翻来翻去,基本上所有的软件都是铣削功能,而且很多软件很复杂.翻了好几天,发现没有什么 ...

  4. Java学习笔记--Swing2D图形

    1.处理2D图形 要想使用java 2D库绘制图形,需要获得一个Graphics2D类对象.这个类是Graphics类的子类.paintComponent方法自动获得一个Graphics2D类对象,我 ...

  5. 百度地图api实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx ...

  6. Word2Vec之Deep Learning in NLP （一）词向量和语言模型

    转自licstar,真心觉得不错,可惜自己有些东西没有看懂 这篇博客是我看了半年的论文后,自己对 Deep Learning 在 NLP 领域中应用的理解和总结,在此分享.其中必然有局限性,欢迎各种交 ...

  7. eclipse安装github插件egit

    http://jingyan.baidu.com/article/4853e1e529483c1909f726c3.html help->InstallNew Software,这是安装插件推荐 ...

  8. Codeforces 571B Minimization

    http://codeforces.com/problemset/problem/571/B 给出一个序列,可以任意调整序列的顺序,使得给出的式子的值最小 思路:我们可以把序列分解,变成k条链,n%k ...

  9. 微软推荐的Get a code signing certificate流程和链接

    Get a code signing certificate   Before you can establish a Windows Dev Center hardware dashboard ac ...

  10. Linux文件系统挂载管理

    http://itercast.com/lecture/19 文件系统创建好之后需要挂载到系统中方可使用,windows.Mac系统会自动挂载文件系统,而Linux下一般需要手工挂载或配置系统进行自动 ...