JavaScript实现带自动提示的文本框效果代码(3)
for(int i=0;i<aColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0) //如果有匹配项
sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
Response.Write(sResult);
%>
示例二：使用jQuery 实现。
客户端：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery实现自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
color:#004a7e;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
function initVars(){
//初始化变量
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUl = $("#colors_ul");
}
function clearColors(){
//清除提示内容
oColorsUl.empty();
oPopDiv.removeClass("show");
}
function setColors(the_colors){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示，再继续
oPopDiv.addClass("show");
for(var i=0;i<the_colors.length;i++)
//将匹配的提示结果逐一显示给用户
oColorsUl.append($("<li>"+the_colors[i]+"</li>"));
oColorsUl.find("li").click(function(){
oInputField.val($(this).text());
clearColors();
}).hover(
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}
function findColors(){
initVars(); //初始化变量
if(oInputField.val().length > 0){
//获取异步数据
$.get("14-10.aspx",{sColor:oInputField.val()},
function(data){
var aResult = new Array();
if(data.length > 0){
aResult = data.split(",");
setColors(aResult); //显示服务器结果
}
else
clearColors();
});
内容版权声明：除非注明，否则皆为本站原创文章。