高分求教：文本框一边输入一边提交

深度抽象 2011-10-09 10:59:57
在jsp页面中文本框一边输入一边提交，同时光标在文本框中，谢谢了。。
最好有个例子。。。

...全文
178 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
放晴那天 2011-10-09
  • 打赏
  • 举报
 回复
顶#10
深度抽象 2011-10-09
  • 打赏
  • 举报
 回复
求高手啊。。。。
24K純帥 2011-10-09
  • 打赏
  • 举报
 回复 


javascript 输入框自动提示



<!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>

<style type="text/css">

.mouseOut{

  background:#708090;

  color:#fffafa;

}

.mouseOver{

  background:#fffafa;

  color:#000000;

}

</style>

<script type="text/javascript">

var completeDiv;

var inputField;

var nameTable;

var nameTableBody;

var selectIndex;

var tempInputValue;



var suggest = new Array();

suggest[0] = "ab";

suggest[1] = "abc";

suggest[2] = "abcd";



function initVars(){

    inputField = document.getElementById("names");

    nameTable = document.getElementById("name_table");

    completeDiv = document.getElementById("popup");

    nameTableBody = document.getElementById("name_table_body");

}

function findNames(){

    var eventkey = window.event.keyCode;

    initVars();

    if(eventkey == 27){

        esc();

    }else if(eventkey == 40 || eventkey == 38){

        changeSelect(eventkey);

    }else{   

        selectIndex = -1; 

        clearNames();

        var inputValue = inputField.value;

        tempInputValue = inputValue;

        if(inputValue == null || inputValue == "")

            return;

    

        for(var i=0; i<suggest.length; i++){

            if(suggest.indexOf(inputValue) == 0){

                //alert(suggest.indexOf(inputValue));

                setNames(inputValue, suggest);

            }

        }

    }

    

}

function esc(){

    while(nameTableBody.childNodes.length > 0){

        nameTableBody.removeChild(nameTableBody.firstChild);

    }

    completeDiv.style.border = "0px";

    inputField.value = tempInputValue;

}

function changeSelect(eventkey){

    var suggestSize = nameTableBody.childNodes.length;

    if(suggestSize == null || suggestSize == 0)

        return;

    if(eventkey == 40 && selectIndex < suggestSize - 1)

        selectIndex++;

    else if(eventkey == 38 && selectIndex > -1)

        selectIndex--;

    

    for(var i=0; i<suggestSize; i++){

        if(selectIndex == -1){

            nameTableBody.childNodes.style.backgroundColor = "#ffffff";

            nameTableBody.childNodes.style.color = "#000000";

            inputField.value = tempInputValue;

        }else if(i == selectIndex){

            nameTableBody.childNodes.style.backgroundColor = "#000000";

            nameTableBody.childNodes.style.color = "#ffffff";

            inputField.value = nameTableBody.childNodes.childNodes[0].innerHTML;

        }

        else{

            nameTableBody.childNodes.style.backgroundColor = "#ffffff";

            nameTableBody.childNodes.style.color = "#000000";

        }

    }

}

function clearNames(){

    var ind = nameTableBody.childNodes.length;

    for(var i=ind-1; i>=0; i--){

        nameTableBody.removeChild(nameTableBody.childNodes);

    }

    completeDiv.style.border = "none";

}

function setNames(inputValue, txt){

    setOffsets();

    

    var row, cell, txtNode;

        var nextNode = txt;

        row = document.createElement("tr");

        cell = document.createElement("td");

        

        cell.onmouseout = function(){this.className = 'mouseOver';};

        cell.onmouseover = function(){this.className = 'mouseOut';};

        cell.setAttribute("bgcolor", "#fffafa");

        cell.setAttribute("border", "0");

        cell.onclick = function(){populateName(this);};

        

        if(inputValue == txt)

            cell.onselect = true;

        

        txtNode = document.createTextNode(nextNode);

        cell.appendChild(txtNode);

        row.appendChild(cell);

        nameTableBody.appendChild(row);

}

function setOffsets(){

    var end = inputField.offsetWidth;

    var left = calculateOffsetLeft(inputField);

    var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

    

    completeDiv.style.border = "black 1px solid";

    completeDiv.style.left = left + "px";

    completeDiv.style.top = top + "px";

    completeDiv.style.width = end + "px";

}

function calculateOffsetLeft(field){

    return calculateOffset(field, "offsetLeft");

}

function calculateOffsetTop(field){

    return calculateOffset(field, "offsetTop");

}

function calculateOffset(field, attr){

    var offset = 0;

    while(field){

        offset += field[attr];

        field = field.offsetParent;

    }

    return offset;

}

function populateName(cell){

    inputField.value = cell.firstChild.nodeValue;

    clearNames();

}

function submitName(){

    alert("ok");

}

</script>

</head>



<body>

输入框自动提示（ie下通过，没做其他浏览器的事件兼容）<br/>

输入：a，上下箭头选择，esc 退出提示<br/>

<form onsubmit="submitName();">

names: <input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/>

<div style="position:absolute; margin-top:-1px;" id="popup">

<table id="name_table" bgcolor="#fffafa" border="0" cellspacing="0" cellpadding="0">

<tbody id="name_table_body"></tbody>

</table>

</div>

</form>

</body>

</html>
深度抽象 2011-10-09
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 th296870402 的回复:]

引用 2 楼 ohxushichao 的回复:

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.


$(document).ready(function(){
$("#文本框ID").change(function(){
JQuery.post(你要处理的action,function(){
……
[/Quote]


唉，还是不明白啊
放晴那天 2011-10-09
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 ohxushichao 的回复:]

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.
[/Quote]

$(document).ready(function(){
$("#文本框ID").change(function(){
JQuery.post(你要处理的action,function(){
$("#文本框ID").focus();
})
})
});
深度抽象 2011-10-09
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 ohxushichao 的回复:]

引用 4 楼 wwwzys 的回复:
引用 2 楼 ohxushichao 的回复:

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.


给个例子行不行啊。。本人菜鸟级的。。


你就找到文本框那个事件就行了, 不知道是不是onChange 你可以试试嘛.
把事件找到后就好弄了,用ajax,至于后台是保存还是更新,那就是你业务问题了……
[/Quote]

你可以看一下这个网站：http://acm.hust.edu.cn:8080/judge/contest/toListContest.action

就是做出这个网站的Search文本框的效果。。
骑着单车散散步 2011-10-09
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 wwwzys 的回复:]
引用 2 楼 ohxushichao 的回复:

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.


给个例子行不行啊。。本人菜鸟级的。。
[/Quote]

你就找到文本框那个事件就行了, 不知道是不是onChange 你可以试试嘛.
把事件找到后就好弄了,用ajax,至于后台是保存还是更新,那就是你业务问题了,
不过你这个想法, 边输入边保存... 感觉不太好.没做过
三心不可得 2011-10-09
  • 打赏
  • 举报
 回复
onkeydown事件
深度抽象 2011-10-09
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 ohxushichao 的回复:]

ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.
[/Quote]

给个例子行不行啊。。本人菜鸟级的。。
放晴那天 2011-10-09
  • 打赏
  • 举报
 回复
用ajax提交,在文本框的onChange事件触发时发送给要处理的action,处理完后，在你写的ajax提交的函数里让文本框获得焦点
骑着单车散散步 2011-10-09
  • 打赏
  • 举报
 回复
ajax 至于是什么时候提交根据你的需求, 写js函数, 在你的文本框合适的事件里调用.
深度抽象 2011-10-09
  • 打赏
  • 举报
 回复
来人啊。。。急需帮忙
2021年软考网络工程师精华套餐（基础精讲+真题讲解+专题突破））
课程目标： 帮助学员顺利通过软考网络工程师考试。 课程简介： 分章节分模块讲解重点技术，难点和考点，让学员学习知识的同时，快速学习考试技巧。... 2020年学员战绩，高分不断，最高分接近满分通过：
我在CSDN参与的3000个帖子
文本框只能输入数值的方法。限制字符已解决，关键是如何保证负号只能在前面，小数点只能输一个。 11： Commondialog 控件多选 ！ 12： 【问】如何修改集合中Varient数组的内容？ 13： 求教:如何在vb...
CSDN回帖得分大全（近两年）
高分求助：ado访问db中文编码 [VC/MFC 数据库] √ .net调用vc写的Activex控件函数时带句柄，这个句柄怎么传递？ [VC/MFC ATL/ActiveX/COM] √ CCheckListBox 问题 [VC/MFC 基础类] √ MFC 显示PNG...
webmagic采集CSDN的Java_WebDevelop页面
, 请问如何设置SVN的权限, 腾讯视频 根据腾讯视频的vid获取视频信息, 求教activiti关于普通表单的理解~, mmGrid提交数据到struts action, 菜鸟求助！对接多个银行这样设计合不合理呢？, 这是什么错？？Resource Path...
vb/vb.net百科技术文章精粹（1）
VB中用CommonDialog 如何设置 保存的文件夹名? [控件] $$winsock接收文件问题 如何在Winform里控制Web页面,填写表单，提交 如何显示指定文件名的ACCESS 查询或窗体 用VB＋SQL SERVER编程
Web 开发

81,092

社区成员

341,716

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章