<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///C|/Documents and Settings/Administrator/桌面/jquery-1.8.3.js"></script>
<style>
.autosearch{
border:1px solid #999;
width:160px;
position:relative;
}
.autosearch input{
border:none;
padding:3px;
font-size:12px;
color:#666;
width:154px
}
.liNormal, .liHover{ font-size:12px; padding-left:5px; height:18px; line-height:18px; overflow: hidden;}
.liHover{ background:#EEE}
</style>
</head>
<body>
<div class="autosearch">
<input type="text" value='请输入品牌名称...' id="a" />
</div>
<script>
/*
* 搜索提示
* **made by keimon**
* *****2012-01-22*****
*/
var jsonData = [{"id":"453","value":"2AM"},{"id":"955","value":"33333"},{"id":"554","value":"37°"},{"id":"152","value":"3E(? Ш E)"},{"id":"347","value":"4YOU"},{"id":"75","value":"5th STREET"},{"id":"166","value":"7princess"},{"id":"953","value":"<>b<\/b>"},{"id":"24","value":"A205"},{"id":"80","value":"ABS"},{"id":"839","value":"Accoona(雅珂妮)"},{"id":"949","value":"测试一下"},{"id":"950","value":"测试一下"},{"id":"915","value":"淑女屋"},{"id":"295","value":"莎玛斯"},{"id":"130","value":"蓝色多瑙河"},{"id":"162","value":"蜜丝佛陀(MAX FACTOR)"},{"id":"105","value":"郑明明-菲莲"},{"id":"548","value":"酷比熊"},{"id":"47","value":"金加瀛"},{"id":"415","value":"金格尔"},{id":"369","value":"马克西姆"},{"id":"195","value":"～H2O+(水芝澳)"}];
// input框中显示或隐藏默认文字；
$("#a").focus(function(){
if($(this).val()==this.defaultValue){
$(this).val("");
}
})
$("#a").blur(function(){
if($(this).val()==""){
$(this).val(this.defaultValue);
}
})
//input框搜索提示；
function test(inputObj,jsonData){
// 设置元素样式
function setStyle(elem,prop){
// var old = {};
for(var i in prop){
// old[i]=elem.style[i];
elem.style[i] = prop[i];
}
// return old;
}
//对json数据的处理，jsondata是json数据，inputValue是json的value中所包含的值，maxLen是获得数据的最大值；
function getDataArr(jsonData,inputValue,maxLen){
var data = eval(jsonData);
var arr = [];
if(inputValue==""){
return;
}
for(var i=0; i<data.length; i++){
if(jsonData[i].value.indexOf(inputValue)!=-1){
arr[arr.length]=jsonData[i];
if(arr.length==20){
return arr;
}
}
}
return arr;
}
//inputObj是传入进来的input的jquery对象
var targetInput = inputObj;
/*
var hiddenObj = document.createElement("input");
hiddenObj.type="hidden";
hiddenObj.id = "hidden"+targetInput.get(0).id;
hiddenObj.name = hiddenObj.id;
*/
var InputOriginalVal = targetInput.val();
var parentDiv = targetInput.get(0).parentNode;
// parentDiv.appendChild(hiddenObj);
var divWidth = $(parentDiv).width();
var divHeight = $(parentDiv).height();
var ulObj = document.createElement("ul");
ulObj.id = "ul"+ targetInput.get(0).id;
parentDiv.appendChild(ulObj);
var ulStyle = {
position: 'absolute',
top: divHeight,
left: -1 + 'px',
margin: 0,
padding: '5px 0 5px 0',
width: divWidth,
height: 'auto',
zIndex: '99999',
border: '1px solid #999',
cursor: 'pointer',
display: 'none',
background:'#fff'
};
setStyle(ulObj,ulStyle);
$(ulObj).css("width",divWidth+"px"); //兼容ff；
//键盘上上下左右，tab，回车键的操作
targetInput.keydown(function(e){
var keyCode = e.keyCode;
//输入不是37、38、39、40、13
if (keyCode !== 37 && keyCode !== 38 && keyCode !== 39 && keyCode !== 40 && keyCode !== 9 && keyCode !== 13) {
// 鼠标释放200ms后，创建下拉区域，并将匹配项放在下拉区域中。
window.setTimeout(function () {
mainFun(e)
}, 200)
}
// 37为向左箭头，38为向上箭头，39为向右箭头，40为向下箭头
if (keyCode == 37 || keyCode == 38 || keyCode == 39 || keyCode == 40) {
var liArr = ulObj.childNodes;
var liLen = liArr.length;
if(liLen==0){
return;
}
if(!$('.liHover')[0]){
$(liArr[0]).addClass("liHover");
showInputVal(targetInput,liArr,0)
return;
}
var highObj = $(".liHover")[0];
var highIndex = $(liArr).index($(highObj));
// 向左、向上箭头
if (keyCode == 37 || keyCode == 38) {
if(highIndex==0){
return;
}
$(liArr).removeClass("liHover");
$(liArr[highIndex-1]).addClass("liHover");
showInputVal(targetInput,liArr,highIndex-1)
}
// 向右、向下箭头
if (keyCode == 39 || keyCode == 40) {
if(highIndex==liLen-1){
return;
}
$(liArr).removeClass("liHover");
$(liArr[highIndex+1]).addClass('liHover');
showInputVal(targetInput,liArr,highIndex+1)
}
}
if (keyCode == 9 || keyCode == 13) {
$(ulObj).hide()
}
})
//input在用键盘输入时的事件
function mainFun(e){
var inputVal = targetInput.val();
var resultArr = getDataArr(jsonData,inputVal,20);
var liStr = "";
if(resultArr!=null){
var arrLength = resultArr.length;
for(var i=0; i<arrLength; i++){
liStr += '<li hidid=' + resultArr[i].id + ' style="padding-left:5px; height:18px; line-height:18px; overflow:hidden; font-size:12px" id=' + 'li' + targetInput.get(0).id + i + '>' + resultArr[i].value + '</li>';
}
}
$(ulObj).html(liStr);
$(ulObj).show();
var liArr = ulObj.childNodes;
var liLen = liArr.length;
$(liArr).mouseenter(function(){
$(liArr).removeClass("liHover");
$(this).addClass("liHover");
})
}
//根据提示的信息（ul中内容），显示在input中；
function showInputVal(inputObj,liArr,index){
var liVal = $(liArr[index]).html();
inputObj.val(liVal);
}
targetInput.keyup(function(){
if(targetInput.val()==""||targetInput.val()==InputOriginalVal){
$(ulObj).hide();
}
})
//页面点击时的进行的处理
$(document).click(function(e){
var target = e.target;
var targetName = target.nodeName;
//alert(targetName.toLowerCase())
if(targetName.toLowerCase()!="li"){
$(ulObj).hide();
}else{
var liArr = ulObj.childNodes;
var highObj = $(".liHover")[0];
var highIndex = $(liArr).index($(highObj));
showInputVal(targetInput,liArr,highIndex);
$(ulObj).hide();
}
})
}
var a = $("#a")
test(a,jsonData)
</script>
</body>
</html>