项目中有时会用到自动补全查询，就像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. 《第一行代码》学习笔记21－Git

    Git(1) 1.Git是一个开源的分布式版本控制工具,其开发者是Linux操作系统的作者Linus Torvalds. 2.仓库(Repository)是用于保存版本管理所需要信息的地方,所有本地提 ...

  2. Visifire Chart控件设置 柱状图 条的宽窄

     Chart myChart = new Chart();myChart.DataPointWidth = 5;宽度以PlotArea的百分比为单位,如下例: chart.Width = 500; c ...

  3. poj1083 贪心

    K - 简单dp Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:10000KB     64bit ...

  4. hdu Intelligent IME

    算法:字典树 题意:手机9键拼音:2:abc  3:def 4:ghi 5:jkl 6:mno 7:pqrs 8:tuv 9:wxyz: 第一行读入一个T,代表测试组数: 之后输入两个整数n和m, 有 ...

  5. Gruntjs构工具学习视频

    在这里推荐一个Gruntjs的学习视频,非常不错! http://www.imooc.com/learn/30

  6. javascript中定义事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...

  7. 【笔记】Linux 和 Unix 作业控制

    Linux 和 Unix 属于多任务的操作系统,也就是说一个系统在同一时间段内能运行多重任务(进程). 作业控制不只是能够停止/挂起(stop/suspend)正在执行的进程(命令),也可以继续/唤醒 ...

  8. Scala学习笔记--上界(<:)、视图界定(<%)、上下文界定(T:M)

    上界 下界 视界 object Test{ def main(args:Array[String]):Unit={ def mulBy(factor:Double)=(x:Double)=>fa ...

  9. CoreData概略

    CoreData概略 分类: IOS开发2013-10-25 16:19 178人阅读 评论(0) 收藏 举报 CoreData是IOS对数据进行对象化管理的一种高效方式,提供了对数据的增.删.查.改 ...

  10. PHP之CI框架架设错误--Only variable references should be returned by reference

    解决参考 http://www.rafalinux.com/ La búsqueda fue bastante infructuosa, y hasta hace un par de días, na ...