62,073
社区成员
发帖
与我相关
我的任务
分享简单JS自动提示文本框
Css代码
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;
padding:1px;
margin:0px;
width:200px;
}
#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;
}
#popup.hide
{/*隱藏提示框的邊框*/
border:none;
}
/*提示框的樣式風格*/
ul
{
list-style:none;
margin:0px;
padding:0px;
}
li.mouseOver
{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut
{
background-color:#FFFFFF;
color:#004a7e;
}
<script language="javascript" type="text/javascript">
var oInputField;//考慮到很多函數都要使用
var oPopDiv; //因此採用全局變量的形式
var oColorsUl;
var aColors=["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","darkgreen","darkhaki","ivory","darmagenta","cornfloewrblue","purple"];
aColors.sort();//按字母排序，使結果友好顯示
function initVars()
{
//初始化變量
oInputField=document.forms["myForm1"].colors;
oPopDiv=document.getElementById["popup"];
oColorsUI=document.getElementById["colors_ul"];
}
function clearColors(){
//清除提示內容
for(var i=oColorsUI.childNodes.length-1;i>=0;i--)
oColorsUI.removeChild(oColorsUI.childNodes[i]);
oPopDiv.className="hide";
}
function setColors(the_colors)
{
//顯示提示框，傳入的參數即為匹配出來的結果組成的數組
clearColors();//每輸入一個字母就先清除原先的提示，再繼續
oPopDiv.className="show";
var oLi;
for(var i=0;i<the_colors.length;i++){
//將匹配的提示結果逐一顯示給用戶
oLi=document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover=function(){
this.className="mouseOver";//鼠標指針經過時高亮
}
oLi.onmouseout=function(){
this.className="mouseOut";//鼠標指針離開時恢復原樣
}
oLi.onclick=function(){
//用戶單擊某個匹配項時，設置輸入框為該項的值
oInputField.value=this.firstChild.nodeValue;
clearColors();//同時清除提示框
}
}
}
function findColors()
{
initVars();//初始化變量
if(oInputField.value.length>0){
var aResult=new Array();//用於存放匹配的結果
for(var i=0;i<aColors.length;i++)//從顏色中找到匹配的結果
//必須是從單詞的開始處匹配
if(aColors[i].indexOf(oInputField.value)==0)
aResult.push(aColors[i]);//壓入結果
if(aResult.length>0)//如果有匹配的顏色則顯示出來
setColors(aResult);//否則清除，用戶多輸入一個字母
else
clearColors();//就有可能從匹配到無，到無的時候需要清除
}
else
clearColors();//無輸入時清除提示框
}
</script><body>
<form method="post" name="myForm1" action="Default.aspx">
Color:
<input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
...全文
请发表友善的回复…
发表回复
qingcongcuizu 2011-06-15
- 打赏
- 举报
？？？？？？？？？
qingcongcuizu 2011-06-10
- 打赏
- 举报
[Quote=引用 10 楼 wxr0323 的回复:]
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google.html</title>
<meta http-equiv="content-type" cont……
[/Quote]代码没有错误，运行时下面出现了一个蓝色线，没有带出任何东西。可能某些地方需要小改一下吧
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google.html</title>
<meta http-equiv="content-type" cont……
[/Quote]代码没有错误，运行时下面出现了一个蓝色线，没有带出任何东西。可能某些地方需要小改一下吧
子夜__ 2011-06-09
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google.html</title>
<meta http-equiv="content-type" content="text/html;charset=GBK">
<script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>
<script type="text/javascript">
var line = 0;
var oldValue = '';
function del() {
if ($("#newDiv")) {
$("#newDiv").remove();
line = 0;
}
}
$(document).ready(function() {
//文本框失去焦点时层消失
$(document.body).click(function() {
del();
});
});
function vchange() {
//alert("value change");
del();
//定位DIV
var top = $("#key").offset().top;
var left = $("#key").offset().left;
var newDiv = $("<div/>").width($("#key").width() + 6).css(
"position", "absolute").css("backgroundColor", "white")
.css("left", left).css("top", top + $("#key").height() + 6)
.css("border", "1px solid blue").attr("id", "newDiv");
/*过滤非法字符输入*/
if($("#key").value != ""){
//alert(oldValue);
/*过滤同名多次查询*/
if ($("#key").val() != oldValue) {
oldValue = $("#key").val();
var url = 'tsearch.action';
var params = {
//POST参数编码处理
key : encodeURI($("#key").val())
};
jQuery.post(url, params, callbackFun, 'json');
}
$(document.body).append(newDiv); //添加DIV
}
if ($("#key").val() == "") {
$("#newDiv").remove();
}
}
//回调函数
function callbackFun(data) {
var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(
"cellspacing", "0");
if (data.result == "") {
//alert("你的关键字有误！");
var tr = $("<tr/>");
var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")
.css("margin", "5 5 5 5");
tr.append(td1);
table.append(tr);
$("#newDiv").append(table);
} else {
var array = data.result.split(",");
for ( var i = 0; i < array.length - 1; i++) {
//alert(array[i]);
var tr = $("<tr/>").css("cursor", "pointer").mouseout(
function() {
$(this).css("backgroundColor", "white").css(
"color", "black");
}).mouseover(
function() {
$(this).css("backgroundColor", "blue").css("color",
"white");
}).click(function() {
$("#key").val($(this).find("td").eq(0).html());
del();
});
var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")
.css("margin", "5 5 5 5");
tr.append(td1);
table.append(tr);
$("#newDiv").append(table);
}
}
}
</script>
</head>
<body>
<h1>Google搜索</h1>
<div style="margin-top: 20px; margin-left: 30px">
请输入搜索关键字:
<input name="key" id="key" onkeyup="vchange()" style="width: 300">
<input type="button" value="Goolge一下">
</div>
</body>
</html> 下载jquery-1.3.2.js
放js文件夹下 保存HTMl看效果
qingcongcuizu 2011-06-09
- 打赏
- 举报
[Quote=引用 8 楼 hj850126 的回复:]
你现在<ul id="colors_ul"></ul>
之间加几个节点试下，这里提示确实是你的UL里面没有节点造成的
[/Quote]还是报同样的错误……
你现在<ul id="colors_ul"></ul>
之间加几个节点试下，这里提示确实是你的UL里面没有节点造成的
[/Quote]还是报同样的错误……
格桑花 2011-06-09
- 打赏
- 举报
你现在<ul id="colors_ul"></ul>
之间加几个节点试下，这里提示确实是你的UL里面没有节点造成的
之间加几个节点试下，这里提示确实是你的UL里面没有节点造成的
renyiqiu 2011-06-09
- 打赏
- 举报
帮LZ顶下
qingcongcuizu 2011-06-09
- 打赏
- 举报
有增加子节点啊
qingcongcuizu 2011-06-09
- 打赏
- 举报
[Quote=引用 4 楼 xuexiaodong2009 的回复:]
的先调用这个initVars()，才能初始化oColorsUI，否则就有错
[/Quote]代码中是这样的
的先调用这个initVars()，才能初始化oColorsUI，否则就有错
[/Quote]代码中是这样的
xuexiaodong2009 2011-06-09
- 打赏
- 举报
的先调用这个initVars()，才能初始化oColorsUI，否则就有错
qingcongcuizu 2011-06-09
- 打赏
- 举报
[Quote=引用 2 楼 porschev 的回复:]
JScript code
oColorsUI=document.getElementById["colors_ul"]; //这里得到了id为colors_ul的ul
oColorsUI.childNodes.length-1 //你这里得他的子节点的个数，然后减1.。
//当然会报这个错了。。
<ul id="colors_ul"></ul>
//你d……
[/Quote]首先是运行findColors()这个函数的。找到匹配的再增加子节点。
JScript code
oColorsUI=document.getElementById["colors_ul"]; //这里得到了id为colors_ul的ul
oColorsUI.childNodes.length-1 //你这里得他的子节点的个数，然后减1.。
//当然会报这个错了。。
<ul id="colors_ul"></ul>
//你d……
[/Quote]首先是运行findColors()这个函数的。找到匹配的再增加子节点。
porschev 2011-06-09
- 打赏
- 举报
oColorsUI=document.getElementById["colors_ul"]; //这里得到了id为colors_ul的ul
oColorsUI.childNodes.length-1 //你这里得他的子节点的个数，然后减1.。
//当然会报这个错了。。
<ul id="colors_ul"></ul>
//你di为colors_ul的里面根本就没有子节点了。。。。
tjbdsh 2011-06-09
- 打赏
- 举报
数据字段如何设置区间范围
例如某一字段10~20 当查询条件在这区间就符合要求，字段类型如何设置？？？
例如某一字段10~20 当查询条件在这区间就符合要求，字段类型如何设置？？？
