自定义提示框

看了博客园好长时间了，学到了好多，作为一个新手各位不要扔砖块啊，，谢谢了，

做了一个网站，还没成型，是仿照sina手机的做的，所以其中的功能比较像，数据也都是从sina上面抓的，一个简单的自动提示文本框（ajax）

不废话了，贴代码了

 

 

 显示提示框css

#phones{
 border:1px solid #669900;
 width:120px;
 height:14px;
 padding-top:4px;
 margin:0px;
}
#popup{
 position:absolute;
 width:200px;
 color:#004a7e;
 font-size:12px;
 left:41px; top:25px;
}

#popup2{
 position:absolute;
 width:100px;
 font-size:12px;
 left:41px; top:25px;
}

 

 /* 显示提示框的边框 */  

#popup.show{
 BACKGROUND: url(../IMAGE/Type.jpg); 
}

 

/* 提示框的样式风格 */
ul{
 list-style:none;
 margin:2px; padding:2px;
 color:#003300;
}
li{
     margin:1px; padding:3px;
     color:#003300;
}
li.mouseOver{
 background-color:#99CC33;
 color:#FFFF00 ;
}

 

 

 

js部分代码

 InputField = $("#phones");
 
 PhonesUl = $("#phones_ul");

PopDiv = $("#popup");

 

function clearPhones(){
 PhonesUl.empty();
 PopDiv.removeClass("show");
}

 

function setPhones(the_phones){
 //显示提示框，传入的参数即为匹配出来的结果组成的数组

//每输入一个字母就先清除原先的提示，再继续
 clearPhones(); 
 PopDiv.addClass("show");
 for(var i=0;i<the_phones.length;i++)
  //将匹配的提示结果逐一显示给用户
  PhonesUl.append($("<li>"+the_phones[i]+"</li>"));
 PhonesUl.find("li").click(function(){
  InputField.val($(this).text());
  clearPhones();
 }).hover(
  function(){$(this).addClass("mouseOver");},
  function(){$(this).removeClass("mouseOver");}
 );
}

 

 

//找到手机的品牌
function findPhonesType()
{
 if(oInputField.val().length > 0){
  //获取异步数据TaxisBy排序方式
  $.get("Select.aspx?TaxisBy="+document.all("Select1").value,{PhoneTypePart:oInputField.val()},
   function(data){
    var aResult = new Array();
    if(data.length > 0){
     aResult = data.split(",");
     setPhones(aResult); 
    }
    else
     clearPhones();
  });
 }
 else
  clearPhones(); 
}

 

 

html部分代码

<input type="text" name="phones" id="phones" οnkeyup="findPhones();" />

<div id="popup" style="left: 5px; top: 43px">
 <ul id="phones_ul"></ul>
</div>

 

后台提供数据由于模块独立也就没封装，，

 

            string sInput = Request["PhoneTypePart"].Trim();

            string TaxisBy = Request["TaxisBy"].Trim();
            if (TaxisBy != "no")
            {
                TaxisBy = TaxisBy + " desc";
            }
            else
            {
                TaxisBy = "PhoneID";
            }
            string sresult = "----手机名称,";
            string s = sInput;
            string[] sArray = s.Split();
            string sInputCan = "";

            for (int i = 0; i < sArray.Length; i++)
            {
                if (i == sArray.Length - 1)
                {
                    sInputCan += sArray[i].ToString();
                    break;

                }
                sInputCan += sArray[i].ToString() + "%";
            }

            string sqlStr = "select top 12 PhonType from PhoneParameter where PhonType like '%" + sInputCan + "%'" + "order by " + TaxisBy;

 

            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {

                sresult += dr[0]+",";
            }
            con.Close();

返回前12条手机名称

            Response.Write(sresult);

 

 

 

 

 

转载于:https://www.cnblogs.com/jhVwei/archive/2009/04/12/1434378.html