jquery之仿百度搜索框
最近项目中用到类似百度的输入框，于是自己用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>
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 }
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);
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 }
