最近项目中用到类似百度的输入框，于是自己用jquery写了一个。希望和大家共同分享一下。存在许多bug，请各位不吝赐教。
先看看整个的效果图：
图一：
图二：
图三：
图四：
大概的效果图就这样，接下来直接看源码
页面：
View Code
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
Default.aspx.cs
"
Inherits
=
"
autoSearch._Default
"
%>
2
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4
5 < html xmlns = " http://www.w3.org/1999/xhtml " >
6 < head runat = " server " >
7 < title ></ title >
8 < link href = " autoSearchText.css " type = " text/css " rel = " Stylesheet " />
9 < script src = " jquery-1.5.1.min.js " type = " text/javascript " ></ script >
10 <% if ( false ){ %>
11 < script type = " text/javascript " src = " jquery-1.5.1.js " ></ script >
12 <% } %>
13 < script src = " jquery.autoSearchText.js " type = " text/javascript " ></ script >
14 < script type = " text/javascript " >
15 $(document).ready(function() {
16 $( ' #autoSearchText ' ).autoSearchText({ width: 300 , itemHeight: 150 ,minChar: 1 , datafn: getData, fn: alertMsg });
17 });
18 function alertMsg(vl){
19 alert( ' 你将要搜索的关键字是： ' + vl);
20 }
21 /* 加载数据 */
22 function getData(val) {
23 var arrData = new Array();
24 if (val != "" ) {
25 $.ajax({
26 type: " post " ,
27 async: false , // 控制同步
28 url: " getData.ashx " ,
29 data: " param= " + val,
30 dataType: " json " ,
31 cache: false ,
32 success: function(data) {
33 for (var i = 0 ; i < data.length; i ++ ) {
34 if (val == data[i].Code.substring( 0 , val.length))
35 arrData.push(data[i].Code);
36 }
37 },
38 Error: function(err) {
39 alert(err);
40 }
41 });
42 }
43 return arrData;
44 }
45 </ script >
46 </ head >
47 < body >
48 < form id = " form1 " runat = " server " >
49 < div >
50 < input id = " autoSearchText " type = " text " value = " 请输入编码 " enableviewstate = " false " />
51 < br />
52 < input id = " Text1 " type = " text " style = " display:none; " />
53 </ div >
54 </ form >
55 </ body >
56 </ html >
2
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4
5 < html xmlns = " http://www.w3.org/1999/xhtml " >
6 < head runat = " server " >
7 < title ></ title >
8 < link href = " autoSearchText.css " type = " text/css " rel = " Stylesheet " />
9 < script src = " jquery-1.5.1.min.js " type = " text/javascript " ></ script >
10 <% if ( false ){ %>
11 < script type = " text/javascript " src = " jquery-1.5.1.js " ></ script >
12 <% } %>
13 < script src = " jquery.autoSearchText.js " type = " text/javascript " ></ script >
14 < script type = " text/javascript " >
15 $(document).ready(function() {
16 $( ' #autoSearchText ' ).autoSearchText({ width: 300 , itemHeight: 150 ,minChar: 1 , datafn: getData, fn: alertMsg });
17 });
18 function alertMsg(vl){
19 alert( ' 你将要搜索的关键字是： ' + vl);
20 }
21 /* 加载数据 */
22 function getData(val) {
23 var arrData = new Array();
24 if (val != "" ) {
25 $.ajax({
26 type: " post " ,
27 async: false , // 控制同步
28 url: " getData.ashx " ,
29 data: " param= " + val,
30 dataType: " json " ,
31 cache: false ,
32 success: function(data) {
33 for (var i = 0 ; i < data.length; i ++ ) {
34 if (val == data[i].Code.substring( 0 , val.length))
35 arrData.push(data[i].Code);
36 }
37 },
38 Error: function(err) {
39 alert(err);
40 }
41 });
42 }
43 return arrData;
44 }
45 </ script >
46 </ head >
47 < body >
48 < form id = " form1 " runat = " server " >
49 < div >
50 < input id = " autoSearchText " type = " text " value = " 请输入编码 " enableviewstate = " false " />
51 < br />
52 < input id = " Text1 " type = " text " style = " display:none; " />
53 </ div >
54 </ form >
55 </ body >
56 </ html >
CSS：
View Code
1
.autoSearchText
{
2 border : solid 1px #CFCFCF ;
3 height : 20px ;
4 color : Gray ;
5 }
6 .menu_v {
7 margin : 0 ;
8 padding : 0 ;
9 line-height : 20px ;
10 font-size : 12px ;
11 list-style-type : none ;
12 }
13 .menu_v li {
14 margin : 0 ;
15 padding : 0 ;
16 line-height : 20px ;
17 font-size : 14px ;
18 list-style-type : none ;
19 float : none ;
20 }
21 .menu_v li span {
22 color : Red ;
23 }
24 #autoSearchItem {
25 border : solid 1px #CFCFCF ;
26 visibility : hidden ;
27 position : absolute ;
28 background-color : white ;
29 overflow-y : auto ;
30 }
2 border : solid 1px #CFCFCF ;
3 height : 20px ;
4 color : Gray ;
5 }
6 .menu_v {
7 margin : 0 ;
8 padding : 0 ;
9 line-height : 20px ;
10 font-size : 12px ;
11 list-style-type : none ;
12 }
13 .menu_v li {
14 margin : 0 ;
15 padding : 0 ;
16 line-height : 20px ;
17 font-size : 14px ;
18 list-style-type : none ;
19 float : none ;
20 }
21 .menu_v li span {
22 color : Red ;
23 }
24 #autoSearchItem {
25 border : solid 1px #CFCFCF ;
26 visibility : hidden ;
27 position : absolute ;
28 background-color : white ;
29 overflow-y : auto ;
30 }
View Code
1
//
/<reference path="jquery-1.5.1.js" />
2
3 ( function ($) {
4 var itemIndex = 0 ;
5
6 $.fn.autoSearchText = function (options) {
7 // 以下为该插件的属性及其默认值
8 var deafult = {
9 width: 200 , // 文本框宽
10 itemHeight: 150 , // 下拉框高
11 minChar: 1 , // 最小字符数(从第几个开始搜索)
12 datafn: null , // 加载数据函数
13 fn: null // 选择项后触发的回调函数
14 };
15 var textDefault = $( this ).val();
16 var ops = $.extend(deafult, options);
17 $( this ).width(ops.width);
18 var autoSearchItem = ' <div id="autoSearchItem"><ul class="menu_v"></ul></div> ' ;
19 $( this ).after(autoSearchItem);
20
21 $( ' #autoSearchItem ' ).width(ops.width + 2 ); // 设置项宽
22 $( ' #autoSearchItem ' ).height(ops.itemHeight); // 设置项高
23
24 $( this ).focus( function () {
25 if ($( this ).val() == textDefault) {
26 $( this ).val( '' );
27 $( this ).css( ' color ' , ' black ' );
28 }
29 });
30 var itemCount = $( ' li ' ).length; // 项个数
31 /* 鼠标按下键时，显示下拉框，并且划过项时改变背景色及赋值给输入框 */
32 $( this ).bind( ' keyup ' , function (e) {
33 if ($( this ).val().length >= ops.minChar) {
34 var position = $( this ).position();
35 $( ' #autoSearchItem ' ).css({ ' visibility ' : ' visible ' , ' left ' : position.left, ' top ' : position.top + 24 });
36 var data = ops.datafn($( this ).val());
37 initItem($( this ), data);
38 var itemCount = $( ' li ' ).length;
39 switch (e.keyCode) {
40 case 38 : // 上
41 if (itemIndex > 1 ) {
42 itemIndex -- ;
43 }
44 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
45 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
46 break ;
47 case 40 : // 下
48 if (itemIndex < itemCount) {
49 itemIndex ++ ;
50 }
51 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
52 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
53 break ;
54 case 13 : // Enter
55 if (itemIndex > 0 && itemIndex <= itemCount) {
56 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
57 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
58 ops.fn($( this ).val());
59 }
60 break ;
61 default :
62 break ;
63 }
64 }
65 });
66 /* 点击空白处隐藏下拉框 */
67 $(document).click( function () {
68 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
69 });
70 };
71 /* 获取文本框的值 */
72 $.fn.getValue = function () {
73 return $( this ).val();
74 };
75
76 /* 初始化下拉框数据,鼠标移过每项时，改变背景色并且将项的值赋值给输入框 */
77 function initItem(obj, data) {
78 var str = "" ;
79 if (data.length == 0 ) {
80 $( ' #autoSearchItem ul ' ).html( ' <div style="text-align:center;color:red;">无符合数据<div> ' );
81 }
82 else {
83 for ( var i = 1 ; i <= data.length; i ++ ) {
84 str += " <li><span> " + i + " / " + data.length + " </span>\r<font> " + data[i - 1 ] + " </font></li> " ;
85 }
86 $( ' #autoSearchItem ul ' ).html(str);
87 }
88 /* 点击项时将值赋值给搜索文本框 */
89 $( ' li ' ).each( function () {
90 $( this ).bind( ' click ' , function () {
91 obj.val($( this ).find( ' font ' ).text());
92 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
93 });
94 });
95 /* 鼠标划过每项时改变背景色 */
96 $( ' li ' ).each( function () {
97 $( this ).hover(
98 function () {
99 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' white ' , ' color ' : ' black ' });
100 itemIndex = $( ' li ' ).index($( this )[ 0 ]) + 1 ;
101 $( this ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
102 obj.val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
103 },
104 function () {
105 $( this ).css({ ' background ' : ' white ' , ' color ' : ' black ' });
106 }
107 );
108 });
109 };
110 })(jQuery);
2
3 ( function ($) {
4 var itemIndex = 0 ;
5
6 $.fn.autoSearchText = function (options) {
7 // 以下为该插件的属性及其默认值
8 var deafult = {
9 width: 200 , // 文本框宽
10 itemHeight: 150 , // 下拉框高
11 minChar: 1 , // 最小字符数(从第几个开始搜索)
12 datafn: null , // 加载数据函数
13 fn: null // 选择项后触发的回调函数
14 };
15 var textDefault = $( this ).val();
16 var ops = $.extend(deafult, options);
17 $( this ).width(ops.width);
18 var autoSearchItem = ' <div id="autoSearchItem"><ul class="menu_v"></ul></div> ' ;
19 $( this ).after(autoSearchItem);
20
21 $( ' #autoSearchItem ' ).width(ops.width + 2 ); // 设置项宽
22 $( ' #autoSearchItem ' ).height(ops.itemHeight); // 设置项高
23
24 $( this ).focus( function () {
25 if ($( this ).val() == textDefault) {
26 $( this ).val( '' );
27 $( this ).css( ' color ' , ' black ' );
28 }
29 });
30 var itemCount = $( ' li ' ).length; // 项个数
31 /* 鼠标按下键时，显示下拉框，并且划过项时改变背景色及赋值给输入框 */
32 $( this ).bind( ' keyup ' , function (e) {
33 if ($( this ).val().length >= ops.minChar) {
34 var position = $( this ).position();
35 $( ' #autoSearchItem ' ).css({ ' visibility ' : ' visible ' , ' left ' : position.left, ' top ' : position.top + 24 });
36 var data = ops.datafn($( this ).val());
37 initItem($( this ), data);
38 var itemCount = $( ' li ' ).length;
39 switch (e.keyCode) {
40 case 38 : // 上
41 if (itemIndex > 1 ) {
42 itemIndex -- ;
43 }
44 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
45 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
46 break ;
47 case 40 : // 下
48 if (itemIndex < itemCount) {
49 itemIndex ++ ;
50 }
51 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
52 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
53 break ;
54 case 13 : // Enter
55 if (itemIndex > 0 && itemIndex <= itemCount) {
56 $( this ).val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
57 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
58 ops.fn($( this ).val());
59 }
60 break ;
61 default :
62 break ;
63 }
64 }
65 });
66 /* 点击空白处隐藏下拉框 */
67 $(document).click( function () {
68 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
69 });
70 };
71 /* 获取文本框的值 */
72 $.fn.getValue = function () {
73 return $( this ).val();
74 };
75
76 /* 初始化下拉框数据,鼠标移过每项时，改变背景色并且将项的值赋值给输入框 */
77 function initItem(obj, data) {
78 var str = "" ;
79 if (data.length == 0 ) {
80 $( ' #autoSearchItem ul ' ).html( ' <div style="text-align:center;color:red;">无符合数据<div> ' );
81 }
82 else {
83 for ( var i = 1 ; i <= data.length; i ++ ) {
84 str += " <li><span> " + i + " / " + data.length + " </span>\r<font> " + data[i - 1 ] + " </font></li> " ;
85 }
86 $( ' #autoSearchItem ul ' ).html(str);
87 }
88 /* 点击项时将值赋值给搜索文本框 */
89 $( ' li ' ).each( function () {
90 $( this ).bind( ' click ' , function () {
91 obj.val($( this ).find( ' font ' ).text());
92 $( ' #autoSearchItem ' ).css( ' visibility ' , ' hidden ' );
93 });
94 });
95 /* 鼠标划过每项时改变背景色 */
96 $( ' li ' ).each( function () {
97 $( this ).hover(
98 function () {
99 $( ' li:nth-child( ' + itemIndex + ' ) ' ).css({ ' background ' : ' white ' , ' color ' : ' black ' });
100 itemIndex = $( ' li ' ).index($( this )[ 0 ]) + 1 ;
101 $( this ).css({ ' background ' : ' blue ' , ' color ' : ' white ' });
102 obj.val($( ' li:nth-child( ' + itemIndex + ' ) ' ).find( ' font ' ).text());
103 },
104 function () {
105 $( this ).css({ ' background ' : ' white ' , ' color ' : ' black ' });
106 }
107 );
108 });
109 };
110 })(jQuery);
getdata.ashx
View Code
1
using
System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Services;
6
7 namespace table
8 {
9 /// <summary>
10 /// $codebehindclassname$ 的摘要说明
11 /// </summary>
12 [WebService(Namespace = " http://tempuri.org/ " )]
13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14 public class getData : IHttpHandler
15 {
16
17 public void ProcessRequest(HttpContext context)
18 {
19 context.Response.Clear();
20 string value = GetResult();
21 context.Response.Write(value);
22 context.Response.End();
23 }
24
25 private string GetResult()
26 {
27 string result = string .Empty;
28
29 result = @"
30 [{""id"":""1"",""Code"":""1374123""},
31 {""id"":""2"",""Code"":""1374133""},
32 {""id"":""3"",""Code"":""1374143""},
33 {""id"":""4"",""Code"":""1374153""},
34 {""id"":""5"",""Code"":""1374163""},
35 {""id"":""6"",""Code"":""1374173""},
36 {""id"":""7"",""Code"":""1374183""},
37 {""id"":""8"",""Code"":""1374193""},
38 {""id"":""9"",""Code"":""1374213""},
39 {""id"":""10"",""Code"":""1374223""},
40 {""id"":""11"",""Code"":""1374233""},
41 {""id"":""12"",""Code"":""1374243""},
42 {""id"":""13"",""Code"":""1374253""},
43 {""id"":""14"",""Code"":""1374263""},
44 {""id"":""15"",""Code"":""1374273""},
45 {""id"":""16"",""Code"":""1374283""},
46 {""id"":""17"",""Code"":""1374293""},
47 {""id"":""18"",""Code"":""1374313""},
48 {""id"":""19"",""Code"":""1374323""},
49 {""id"":""20"",""Code"":""1374333""},
50 {""id"":""21"",""Code"":""1374343""},
51 {""id"":""22"",""Code"":""1374353""},
52 {""id"":""23"",""Code"":""1374363""},
53 {""id"":""24"",""Code"":""1374373""},
54 {""id"":""25"",""Code"":""1374383""},
55 {""id"":""26"",""Code"":""1374393""},
56 {""id"":""27"",""Code"":""1374403""},
57 {""id"":""28"",""Code"":""1374413""},
58 {""id"":""29"",""Code"":""1374423""},
59 {""id"":""30"",""Code"":""1374433""},
60 {""id"":""31"",""Code"":""1374443""},
61 {""id"":""32"",""Code"":""1374453""},
62 {""id"":""33"",""Code"":""1374463""},
63 {""id"":""34"",""Code"":""1374473""},
64 {""id"":""35"",""Code"":""1374483""},
65 {""id"":""36"",""Code"":""1374493""}] " ;
66
67 return result;
68 }
69
70 public bool IsReusable
71 {
72 get
73 {
74 return false ;
75 }
76 }
77 }
78 }
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Services;
6
7 namespace table
8 {
9 /// <summary>
10 /// $codebehindclassname$ 的摘要说明
11 /// </summary>
12 [WebService(Namespace = " http://tempuri.org/ " )]
13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14 public class getData : IHttpHandler
15 {
16
17 public void ProcessRequest(HttpContext context)
18 {
19 context.Response.Clear();
20 string value = GetResult();
21 context.Response.Write(value);
22 context.Response.End();
23 }
24
25 private string GetResult()
26 {
27 string result = string .Empty;
28
29 result = @"
30 [{""id"":""1"",""Code"":""1374123""},
31 {""id"":""2"",""Code"":""1374133""},
32 {""id"":""3"",""Code"":""1374143""},
33 {""id"":""4"",""Code"":""1374153""},
34 {""id"":""5"",""Code"":""1374163""},
35 {""id"":""6"",""Code"":""1374173""},
36 {""id"":""7"",""Code"":""1374183""},
37 {""id"":""8"",""Code"":""1374193""},
38 {""id"":""9"",""Code"":""1374213""},
39 {""id"":""10"",""Code"":""1374223""},
40 {""id"":""11"",""Code"":""1374233""},
41 {""id"":""12"",""Code"":""1374243""},
42 {""id"":""13"",""Code"":""1374253""},
43 {""id"":""14"",""Code"":""1374263""},
44 {""id"":""15"",""Code"":""1374273""},
45 {""id"":""16"",""Code"":""1374283""},
46 {""id"":""17"",""Code"":""1374293""},
47 {""id"":""18"",""Code"":""1374313""},
48 {""id"":""19"",""Code"":""1374323""},
49 {""id"":""20"",""Code"":""1374333""},
50 {""id"":""21"",""Code"":""1374343""},
51 {""id"":""22"",""Code"":""1374353""},
52 {""id"":""23"",""Code"":""1374363""},
53 {""id"":""24"",""Code"":""1374373""},
54 {""id"":""25"",""Code"":""1374383""},
55 {""id"":""26"",""Code"":""1374393""},
56 {""id"":""27"",""Code"":""1374403""},
57 {""id"":""28"",""Code"":""1374413""},
58 {""id"":""29"",""Code"":""1374423""},
59 {""id"":""30"",""Code"":""1374433""},
60 {""id"":""31"",""Code"":""1374443""},
61 {""id"":""32"",""Code"":""1374453""},
62 {""id"":""33"",""Code"":""1374463""},
63 {""id"":""34"",""Code"":""1374473""},
64 {""id"":""35"",""Code"":""1374483""},
65 {""id"":""36"",""Code"":""1374493""}] " ;
66
67 return result;
68 }
69
70 public bool IsReusable
71 {
72 get
73 {
74 return false ;
75 }
76 }
77 }
78 }
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
