先看看整个的效果图：
图一：
图二：
图三：
图四：
大概的效果图就这样，接下来直接看源码
页面：
复制代码 代码如下:
css：
复制代码 代码如下:
.autosearchtext{
border:solid 1px #cfcfcf;
height:20px;
color:gray;
}
.menu_v{
margin:0;
padding:0;
line-height:20px;
font-size:12px;
list-style-type:none;
}
.menu_v li{
margin:0;
padding:0;
line-height:20px;
font-size:14px;
list-style-type:none;
float:none;
}
.menu_v li span{
color:red;
}
#autosearchitem{
border:solid 1px #cfcfcf;
visibility:hidden;
position:absolute;
background-color:white;
overflow-y:auto;
}
js：
复制代码 代码如下:
1 ///
2
3 (function($) {
4 var itemindex = 0;
5
6 $.fn.autosearchtext = function(options) {
7 //以下为该插件的属性及其默认值
8 var deafult = {
9 width: 200, //文本框宽
itemheight: 150, // 下拉框高
minchar: 1, //最小字符数(从第几个开始搜索)
datafn: null, //加载数据函数
fn: null //选择项后触发的回调函数
};
var textdefault = $(this).val();
var ops = $.extend(deafult, options);
$(this).width(ops.width);
var autosearchitem = '
';
$(this).after(autosearchitem);
$('#autosearchitem').width(ops.width + 2); //设置项宽
$('#autosearchitem').height(ops.itemheight); //设置项高
$(this).focus(function() {
if ($(this).val() == textdefault) {
$(this).val('');
$(this).css('color', 'black');
}
});
var itemcount = $('li').length; //项个数
/*鼠标按下键时，显示下拉框，并且划过项时改变背景色及赋值给输入框*/
$(this).bind('keyup', function(e) {
if ($(this).val().length >= ops.minchar) {
var position = $(this).position();
$('#autosearchitem').css({ 'visibility': 'visible', 'left': position.left, 'top': position.top + 24 });
var data = ops.datafn($(this).val());
inititem($(this), data);
var itemcount = $('li').length;
switch (e.keycode) {
case 38: //上
if (itemindex > 1) {
itemindex--;
}
$('li:nth-child(' + itemindex + ')').css({ 'background': 'blue', 'color': 'white' });
$(this).val($('li:nth-child(' + itemindex + ')').find('font').text());
break;
case 40: //下
if (itemindex itemindex++;
}
$('li:nth-child(' + itemindex + ')').css({ 'background': 'blue', 'color': 'white' });
$(this).val($('li:nth-child(' + itemindex + ')').find('font').text());
break;
case 13: //enter
if (itemindex > 0 && itemindex $(this).val($('li:nth-child(' + itemindex + ')').find('font').text());
$('#autosearchitem').css('visibility', 'hidden');
ops.fn($(this).val());
}
break;
default:
break;
}
}
});
/*点击空白处隐藏下拉框*/
$(document).click(function() {
$('#autosearchitem').css('visibility', 'hidden');
});
};
/*获取文本框的值*/
$.fn.getvalue = function() {
return $(this).val();
};
/*初始化下拉框数据,鼠标移过每项时，改变背景色并且将项的值赋值给输入框*/
function inititem(obj, data) {
var str = ;
if (data.length == 0) {
$('#autosearchitem ul').html('无符合数据');
}
else {
for (var i = 1; i str += + i + / + data.length + \r + data[i - 1] + ;
}
$('#autosearchitem ul').html(str);
}
/*点击项时将值赋值给搜索文本框*/
$('li').each(function() {
$(this).bind('click', function() {
obj.val($(this).find('font').text());
$('#autosearchitem').css('visibility', 'hidden');
});
});
/*鼠标划过每项时改变背景色*/
$('li').each(function() {
$(this).hover(
function() {
$('li:nth-child(' + itemindex + ')').css({ 'background': 'white', 'color': 'black' });
itemindex = $('li').index($(this)[0]) + 1;
$(this).css({ 'background': 'blue', 'color': 'white' });
obj.val($('li:nth-child(' + itemindex + ')').find('font').text());
},
function() {
$(this).css({ 'background': 'white', 'color': 'black' });
}
);
});
};
})(jquery);
getdata.ashx
复制代码 代码如下:
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.services;
namespace table
{
///
/// $codebehindclassname$ 的摘要说明
///
[webservice(namespace = http://tempuri.org/)]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
public class getdata : ihttphandler
{
public void processrequest(httpcontext context)
{
context.response.clear();
string value = getresult();
context.response.write(value);
context.response.end();
}
private string getresult()
{
string result = string.empty;
result = @
[{id:1,code:1374123},
{id:2,code:1374133},
{id:3,code:1374143},
{id:4,code:1374153},
{id:5,code:1374163},
{id:6,code:1374173},
{id:7,code:1374183},
{id:8,code:1374193},
{id:9,code:1374213},
{id:10,code:1374223},
{id:11,code:1374233},
{id:12,code:1374243},
{id:13,code:1374253},
{id:14,code:1374263},
{id:15,code:1374273},
{id:16,code:1374283},
{id:17,code:1374293},
{id:18,code:1374313},
{id:19,code:1374323},
{id:20,code:1374333},
{id:21,code:1374343},
{id:22,code:1374353},
{id:23,code:1374363},
{id:24,code:1374373},
{id:25,code:1374383},
{id:26,code:1374393},
{id:27,code:1374403},
{id:28,code:1374413},
{id:29,code:1374423},
{id:30,code:1374433},
{id:31,code:1374443},
{id:32,code:1374453},
{id:33,code:1374463},
{id:34,code:1374473},
{id:35,code:1374483},
{id:36,code:1374493}];
return result;
}
public bool isreusable
{
get
{
return false;
}
}
}
}
demo下载