项目中有时会用到自动补全查询，就像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. JS基础函数

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 <script> function demo(){ var a = 10; var b = 25; var sum = a + ...

  2. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  3. ADO.NET中连接SQL Sever

    1.在配置文件中定义数据库连接信息. 在配置文件*.config中添加这段代码在<configuration>与</configuration>之间: <connecti ...

  4. bootstrap小结

    bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...

  5. java实现简单的单点登录

    java实现简单的单点登录 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现 ...

  6. Go学习笔记(二):编写 HelloWorld 程序

    //Hello.go代码 package main import "fmt" func main(){ fmt.Printf("Hello, world!This is ...

  7. Android编程心得-JSON使用心得（二）

    在Android开发中,我们经常会用到JSON来与网络数据进行交互,下面我来介绍如何对JSON数据进行解析与制造 1.当我们需要对如下JSON串进行制造时: { "download" ...

  8. mysql 权限分配及创建新用户

    前言 本文主要是介绍mysql创建新用户命令及赋予权限等命令,为了便于理解,文中会给出相关示例.通常情况下,创建用户,修改mysql密码,授权,是需要有mysql里的root权限. 1.创建用户: / ...

  9. 2014-06-13 jq chart

    昨天接到上级说要在检测服务器上增加一个可以根据时间来查看服务器信息的线形图,那我首先就在原有的发送监控信息的功能上增加了把信息存入数据库中,然后再数据库中取得数据显示. 至于线形图的插件是jqx 的c ...

  10. 了不起的分支和循环02 - 零基础入门学习Python008

    了不起的分支和循环02 让编程改变世界 Change the world by program 上节课,小甲鱼教大家如何正确的打飞机,其要点就是:判断和循环,判断就是该是不该做某事,循环就是持续做某事 ...