日期:2014-05-17  浏览次数:20743 次

实现一个ajax输入框
我想实现一个input输入条,<input type="text">

然后用户可以输入代码,唯一就是,当他开始输入的时候有个类似选项单的自动提示后面的内容

举个例子吧, 输入1,下面提示123 132 133, 然后我继续输入2,下面就提示123.回车输入完成

就是说我有很大的一个id数据库,当用户记住前几个的时候后面就能给一些提示,不用记住一长串数字。


我觉得应该用ajax完成,但是有没有什么好的方法,不会我每次判断键盘按下事件然后调用ajaxa引擎并返回?

有没有实现好的模块我可以直接用的,谢谢



------解决方案--------------------
在输入框下方加个DIV层,用户输入数据时ajax请求后台数据,将数据显示在下面的层中!~
------解决方案--------------------
// 这个AjaxDemo 正和楼主之意
/// *********************************************************
//AjaxSourch.txt:下面这个文件当做数据库,存放在C:\AjaxSourch.txt
工人是好人
a
ab
af
ajax
abcdefg
abcccc
abdddd 1-7
www.gxu.edu.cn
wwwgxueducn
WWW.XUE.EDU.CN
WWWGXUEDUCN
百度
百度知道
百度图片
工人
工贸
工龄
工牌1-19
/// *********************************************************
// 这是前台页面 Tip.html:
HTML code
<!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=utf-8" />
<meta http-equiv="pragram" content="no-cache">
<link href="Tip.css" type="text/css" rel=stylesheet charset="utf-8" />
<script language="javascript" type="text/javascript" src="Tip.js">
</script>
<title>Ajax Demo</title>
</head>

<body>
<h3>Ajax下拉提示演示</h3>
<div id="Exam">测试输入:a、Ajax</div>
<br />

<input type="text" id="ShowText" onblur="javascript:setTimeout('HideTTip()',300);" 
    onkeyup="javascript:if ( this.value!=''){ ShowTip(); } else { HideTTip(); }" size="50" autocomplete="off"/>

<input type="button" id="alert" name="alert" value="搜 索" 
    onclick="javascript:if(document.getElementById('ShowText').value!='') {alert('开 始 搜 索: '+document.getElementById('ShowText').value);}">

<div id="ShowTip" name="ShowTip" style="display:none"></div>
</body>
</html>