我的输入选择小插件
这几天突发奇想的想做个输入选择插件，于是就着手开始做了个输入选择插件。写的时候还是遇到过几个问题，想在这里总结和大家分享一下。
和正常的环境一样，我自定义了一个json数据，模拟实际使用的时候从数据库读取的数据，定义数据的长度的20条，实际使用以实际获取到的json的长度为准，前面都没什么问题，输入一个一个字符串，首先比较长度，如果json数组你面的数据长度小于当前字符串的直接pass，剩下大于输入长度的json数组，（加入输入字符的长度为n）比较输入字符串的值可json数组中每个数据前n个字符的值是否相等，如果相等的话就显示。否则隐藏。每当键盘keyup事件和获取焦点的事件都会出发这个判断，然后点击就可以选中到input输入框中。
好， 到此为止，其实都没有太大问题，比如显示多少条和输入字符相似的字符，这些都比较好控制。但是问题来了，我在输入的时候我要用上下键来控制选择，这时好像就显得比较复杂了，苦思冥想之后，终于找到了答案，那就是获取当前的选中状态，然后根据这个来判断，这里不想家叙述，后面会奉上代码，有兴趣者可详读， 记得后面还有一个问题，就是当这个input失去焦点的时候，这写显示的字符串是不是应该隐藏，当input获取焦点的时候，会根据当前input中的value值，来重新显示这些字符串。没有问题，可是我又加了个按钮，点击这个按钮的时候，所有json中的字符串都会显示，这个时候问题来了 我点击这个按钮的时候，所有json数据是会显示，可是上下键选不了了等等一些细节上的问题。
代码奉上：（html）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/select.css" type="text/css" rel="stylesheet">
<title>输入框与下拉框</title>
</head>
<body>
<div class="select-content">
<div class="select-input"><input type="text" class="key-input" placeholder="请输入您要搜索的内容" value=""><button>查询</button><a class="liebiao"><img src="img/liebiao.png"></a></div>
<ul class="show-select"></ul>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _max;
var _scroll;
var _scrollWidth;
var _scrollHeight;
_max=4;//提示信息最多显示条数 用户可以自定义
_scroll=false;//用户自定义提示信息太多时显示滚动条
_scrollWidth="auto";//宽度自定义
_scrollHeight="200px";//高度定义
$(function(){
var select_data = {
1 : '生活',
2 : '生理期',
3 : '生长',
4 : '生长期',
5 : '采收期',
6 : '生意',
7 : '生意兴隆',
8 : '生活美好',
9 : '生气',
10 : '生活好快活',
11 : '就是要生活',
12 : '就这样',
13 : '就像是。。。',
14 : '就你了',
15 : 'zhuchenghu',
16 : 'zhu',
17 : ' zhuchenghuhuhu',
18 : 'zhuzhuzhu',
19 : ' zhuzhuzhuzhzu',
20 : 'zhuzhuzhuzchenghu'
};
var _lengthSelect=getJsonObjLength(select_data);
if(_scroll==true){
$("ul.show-select").addClass("scrolly");
$(".scrolly").css("max-height",_scrollHeight);
}
var m=0;
$("input.key-input").keyup(function(event){
var _value=$(this).val();
var _lengthinput=$(this).val().length;
var _lengthLi=$(".show-select li").length;
if(event.keyCode==null){
if(event.keyCode==40){
var _currm=$(".show-select li.curr").index();
var n=(_currm+mincount(_max,_lengthLi)+2)%(mincount(_max,_lengthLi)+1)
$(".show-select li").removeClass("curr");
$(".show-select li:eq("+n+")").addClass("curr");
var _valueCurr=$(".show-select li.curr").html();
if(_valueCurr==undefined){
$(".select-input").find("input").val(_value);
}else{
$(".select-input").find("input").val(_valueCurr);
}
}else if(event.keyCode==38){
var _currm=$(".show-select li.curr").index();
var n=(_currm+mincount(_max,_lengthLi))%(mincount(_max,_lengthLi)+1)
$(".show-select li").removeClass("curr");
$(".show-select li:eq("+n+")").addClass("curr");
var _valueCurr=$(".show-select li.curr").html();
if(_valueCurr==undefined){
$(".select-input").find("input").val(_value);
}else{
$(".select-input").find("input").val(_valueCurr);
}
}else if(event.keyCode==13){
var _valueCurr=$(".show-select li.curr").html();
$(".select-input").find("input").val(_valueCurr);
$("ul.show-select li").remove();
$(".show-select").hide();
$(this).blur();
}else{
$("ul.show-select li").remove();
if(_value!=""){
for(var i=1;i<=_lengthSelect;i++){
var _lengthtext=select_data[i].length;
if(_lengthinput<=_lengthtext && _value==select_data[i].substring(0,_lengthinput)){
$("ul.show-select").append("<li>"+select_data[i]+"</li>");
$("ul.show-select li:gt("+(_max-1)+")").remove();
$(".show-select").show();
}
}
}else{
$("ul.show-select li").remove();
$(".show-select").hide();
}
}}
});
$("input.key-input").focus(function(){
$("input.key-input").trigger("keyup");
});
$("input.key-input").blur(function(){
$("ul.show-select li").remove();
$(".show-select").hide();
});
$(".show-select>li").live("mousedown",function(){
var _value=$(this).html();
$(".select-input").find("input").val(_value);
$("ul.show-select li").remove();
$(".show-select").hide();
});
$("a.liebiao").click(function(){
var _display=$(".show-select").css("display");
if(_display=="none"){
$(".show-select").show();
for(var i=1;i<=_lengthSelect;i++){
_max=_lengthSelect;
$("ul.show-select").append("<li>"+select_data[i]+"</li>");
}
}else{
$("ul.show-select li").remove();
$(".show-select").hide();
}
});
});
//获取json数据的长度
function getJsonObjLength(jsonObj) {
var Length = 0;
for (var item in jsonObj) {
Length++;
}
return Length;
}
//取最小值函数
function mincount(_max,_min){
if(_max>=_min){
return _min;
}else{
return _max;
}
}
</script>
</body>
</html>
css：
@charset "utf-8";
/* CSS Document */
body{ margin:0px; padding:0px;}
ul,li{ list-style:none; margin:0px; padding:0px;}
input{padding-left:10px;}
.select-content{width:980px;height:auto; position:relative;left:200px; top:100px;}
.select-content .select-input input{width:360px;border:1px solid #4791FF; font-size:16px; height:40px; position:relative; outline:none; padding-right:40px}
.select-content .select-input button{background:#3385FF;color:#fff;width:100px;height:44px;letter-spacing:1px; border:0px; font-size:18px;}
.select-content .select-input input:focus{width:360px;border:1px solid #4791FF; height:40px; position:relative; outline:none;}
.select-content .select-input a{position:absolute; left:376px; top:7px;}
.select-content .select-input a img{cursor:pointer;}
.select-content ul{width:410px; height:auto;border:1px solid #ccc;position:absolute; top:43px;display:none;}
.select-content ul.scrolly{width:410px;border:1px solid #ccc;position:absolute; top:43px;display:none; overflow-y:auto; overflow-x:hidden;}
.select-content ul li{width:400px; height:25px; line-height:25px; padding-left:10px; color:#333; display:block;}
.select-content ul li:hover{background:#efefef;}
.select-content ul li.curr{background:#efefef;}
