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""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="/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();
24if (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) {
33for (var i = 0; i < data.length; i++) {
34if (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 }
43return 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" />
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 }
7 margin:0;
8 padding:0;
9 line-height:20px;
10 font-size:12px;
11 list-style-type:none;
12 }
14 margin:0;
15 padding:0;
16 line-height:20px;
17 font-size:14px;
18 list-style-type:none;
19 float:none;
20 }
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 }
JS：
View Code
1///<reference path="jquery-1.5.1.js" />
2
3 (function($) {
4var itemIndex = 0;
5
6 $.fn.autoSearchText = function(options) {
7//以下为该插件的属性及其默认值
8var deafult = {
9 width: 200, //⽂本框宽
10 itemHeight: 150, // 下拉框⾼
11 minChar: 1, //最⼩字符数(从第⼏个开始搜索)
12 datafn: null, //加载数据函数
13 fn: null//选择项后触发的回调函数
14 };
15var textDefault = $(this).val();
16var ops = $.extend(deafult, options);
17 $(this).width(ops.width);
18var 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() {
25if ($(this).val() == textDefault) {
26 $(this).val('');
27 $(this).css('color', 'black');
28 }
29 });
30var itemCount = $('li').length; //项个数
31/*⿏标按下键时，显⽰下拉框，并且划过项时改变背景⾊及赋值给输⼊框*/
32 $(this).bind('keyup', function(e) {
33if ($(this).val().length >= ops.minChar) {
34var position = $(this).position();
35 $('#autoSearchItem').css({ 'visibility': 'visible', 'left': position.left, 'top': p + 24 }); 36var data = ops.datafn($(this).val());
37 initItem($(this), data);
38var itemCount = $('li').length;
39switch (e.keyCode) {
40case 38: //上
41if (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());
46break;
47case 40: //下
48if (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());
53break;
54case 13: //Enter
55if (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 }
60break;
61default:
62break;
63 }
64 }
65 });
66/*点击空⽩处隐藏下拉框*/
67 $(document).click(function() {
68 $('#autoSearchItem').css('visibility', 'hidden');
69 });
70 };
71/*获取⽂本框的值*/
72 $.fn.getValue = function() {
73return $(this).val();
74 };
75
76/*初始化下拉框数据,⿏标移过每项时，改变背景⾊并且将项的值赋值给输⼊框*/
77function initItem(obj, data) {
78var str = "";jquery获取下拉框选中值
79if (data.length == 0) {
80 $('#autoSearchItem ul').html('<div >⽆符合数据<div>');
81 }
82else {
83for (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(
98function() {
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 },
104function() {
105 $(this).css({ 'background': 'white', 'color': 'black' });
106 }
107 );
108 });
109 };
110 })(jQuery);
getdata.ashx
View Code
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.Services;
6
7namespace table
8 {
9///<summary>
10/// $codebehindclassname$ 的摘要说明
11///</summary>
12 [WebService(Namespace = "/")]
13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14public class getData : IHttpHandler
15 {
16
17public void ProcessRequest(HttpContext context)
18 {
19 context.Response.Clear();
20string value = GetResult();
21 context.Response.Write(value);
22 context.Response.End();
23 }
24
25private string GetResult()
26 {
27string 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
67return result;
68 }
69
70public bool IsReusable
71 {
72get
73 {
74return false;
75 }
76 }
77 }
78 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论