项目中有时会用到自动补全查询，就像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. css重点

    1.CSS的盒子模型? (1)两种, IE 盒子模型.标准 W3C 盒子模型:IE 的content部分包含了 border 和 pading; (2)盒模型: 内容(content).填充(padd ...

  2. “文件XXX正由另一进程使用，因此该进程无法访问此文件”

    文件xxx正在由另一进城使用,这种问题出现有一种原因: 就是同一个线程重打开文件,但是没有关闭的情况下,再次读取的时候抛出异常. 如下的代码为错误代码:

  3. Asp.net中实现同一用户名同时登陆，注销先前用户(转)

    Web 项目中经常遇到的问题就是同一用户名多次登陆的问题,相应的解决办法也很多,总结起来不外乎这几种解决办法:将登陆后的用户名放到数据库表中:登陆后的用 户名放到Session中:登陆后的用户名放到A ...

  4. 我永远的 dell 15r

    陪伴我三年多的15r  让我疯狂过.努力过.更记录了我很多的成长,与很多个瞬间.看到它是有感情的.还记得第一次失去她.我好像失去了自己. 我是一个程序员.每个程序员都有自己的环境配置.不同的软件.就是 ...

  5. ios swift(1)冒泡排序

    //冒泡排序  稳定性最高  时间复杂度高 O(n(2)) ,交换次数太多, 一次交换等于三次赋值    最简单 var count = 0 func sortInts(inout data : [I ...

  6. Objective-C 协议(接口)

    Objective-C 协议类似于java语言中的接口 新建文件步骤:Objective-C File ---> File Type = "Protocol" @protoc ...

  7. 简单的批量读取外部insert文并插入DB

    package com.tongxiang.item.base.dao; import java.io.BufferedReader; import java.io.File; import java ...

  8. hdu5348 MZL's endless loop(欧拉回路)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud MZL's endless loop Time Limit: 3000/1500 ...

  9. shell中的循环语句

    for语法格式 for var in list;do commands done 其中list可以包含: 1) 直接写 for alpha in a b c d;do echo $alpha done ...

  10. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...