使用ajax实现的功能,在一个框中输入关键字,自动输出提示信息获取id并填入到另一框中?
html代码如下:<head><scripttype="text/javascript">varhttp_request;functiongetKey(v){if(v.v...
html代码如下:
<head>
<script type="text/javascript">
var http_request;
function getKey(v){
if(v.value.length>2){
Ajax_send("process.phtml?cs_id=<?=$cs_id?>&key="+v.value,'GET');
}
function Ajax_send(url,method){
if(window.XMLHttpRequest){
http_request= new XMLHttpRequest();
}else if(window.ActiveXObject){
http_request= new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange=Ajax_out;
http_request.open(method,url,true);
http_request.send(null);
}
function Ajax_out(){
if(http_request.readyState==4){
if(http_request.responseText!=''){
out(http_request.responseText,'block');
} else{
alert("null");
}
}
}
function out(inner,display){
var div=document.getElementById('out');
var e=document.getElementById('matID');
var top=e.getBoundingClientRect().top;
var left=e.getBoundingClientRect().left;
changeStyle(div,top+20,left,452);
div.style.display=display;
div.innerHTML=inner;
}
function end(select){
document.getElementById('matID').value=select;
document.getElementById('out').style.display='none';
}
function changeStyle(div,top,left,width){
div.style.top=top;
div.style.left=left;
div.style.width=width;
}
</script>
<style>
.test{
display:none;
z-index:100;
width:452px;
top:20px;
left:0px;
height:auto;
background-color:lightgrey;
border:1px solid;
position:absolute;
}
</style>
</head>
<body>
<div id="out" class="test"></div>
<table><tr>
<td nowrap align="center"><input id="matID" name="matID" size="4" value="" readonly/><input name="code" value="" onKeyDown='getKey(this);' autocomplete='off'/></td>
</tr>
</td>
</table>
<body>
</html>
process.phtml文件的代码如下:
<?
require_once('include/matService.inc');
$matservice= new matService();
$key=$_GET['key'];
$cs_id=$_GET['cs_id'];
//echo $key;
//echo $cs_id;
$rt=$matservice->getMat_name($key,$cs_id);
$return="";
if($i=0;$i<count($rt);$i++){
$row_mat=$rt[$i];
$return.="<a href=\"#\" onClick=\"end('".$row_mat['id']."');\">".$row_mat['code']." ".$row_mat['name']."</a></br>";
}
echo $return;
?>
可是想要的效果出不来怎么改呀? 展开
<head>
<script type="text/javascript">
var http_request;
function getKey(v){
if(v.value.length>2){
Ajax_send("process.phtml?cs_id=<?=$cs_id?>&key="+v.value,'GET');
}
function Ajax_send(url,method){
if(window.XMLHttpRequest){
http_request= new XMLHttpRequest();
}else if(window.ActiveXObject){
http_request= new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange=Ajax_out;
http_request.open(method,url,true);
http_request.send(null);
}
function Ajax_out(){
if(http_request.readyState==4){
if(http_request.responseText!=''){
out(http_request.responseText,'block');
} else{
alert("null");
}
}
}
function out(inner,display){
var div=document.getElementById('out');
var e=document.getElementById('matID');
var top=e.getBoundingClientRect().top;
var left=e.getBoundingClientRect().left;
changeStyle(div,top+20,left,452);
div.style.display=display;
div.innerHTML=inner;
}
function end(select){
document.getElementById('matID').value=select;
document.getElementById('out').style.display='none';
}
function changeStyle(div,top,left,width){
div.style.top=top;
div.style.left=left;
div.style.width=width;
}
</script>
<style>
.test{
display:none;
z-index:100;
width:452px;
top:20px;
left:0px;
height:auto;
background-color:lightgrey;
border:1px solid;
position:absolute;
}
</style>
</head>
<body>
<div id="out" class="test"></div>
<table><tr>
<td nowrap align="center"><input id="matID" name="matID" size="4" value="" readonly/><input name="code" value="" onKeyDown='getKey(this);' autocomplete='off'/></td>
</tr>
</td>
</table>
<body>
</html>
process.phtml文件的代码如下:
<?
require_once('include/matService.inc');
$matservice= new matService();
$key=$_GET['key'];
$cs_id=$_GET['cs_id'];
//echo $key;
//echo $cs_id;
$rt=$matservice->getMat_name($key,$cs_id);
$return="";
if($i=0;$i<count($rt);$i++){
$row_mat=$rt[$i];
$return.="<a href=\"#\" onClick=\"end('".$row_mat['id']."');\">".$row_mat['code']." ".$row_mat['name']."</a></br>";
}
echo $return;
?>
可是想要的效果出不来怎么改呀? 展开
1个回答
展开全部
没看你的代码,我一般都用JQuery的ajax框架做ajax。
给你一个我的思路,我用的asp.net语言。
文件需求:一个显示调用页面,命名为a。aspx;一个ajax后台返回数据页,命名为ajax。aspx
页面布置:a.aspx 中写入操作内容,一个ajax调用方法,一个选定值方法,一个div接收返回HTML,名为为div_data
一,//ajax调用方法
function DoAjax(val){
$("#div_data").show();
var url = "Ajax.aspx?val="+val;
$.get(url, function(data) {
//data为ajax返回数据,字符串类型
$("#div_data").attr("innerHTML",data); })
}
//选定值方法,并复制给一个输入框(id为txt_data)
function selectData(val){
$("#txt_data").attr("value",val);
$("#div_data").hide();
}
//两个txt,一个div
<input type='text' onkeyup="DoAjax this.value)"/>
<div id='div_data'></div>
<input type='text' id='txt_data'/>
二,//ajax.aspx接收参数值,根据参数值获得数据并拼接为HTML返回
//没有HTML代码,后台输出HTML//后台代码如下
string param=request.QueryString["val"];
//此处为根据参数查询数据库,获得列表数据datatable或其他数据集合都可以
DataTable dt=GetDataTable(val);
//循环dataTable,编写格式输出HTML
string HTML="";
foreach(DataRow dr in dt.Rows){
HTML+="<a href='JavaScript:void(0)' onclick=\"SelectData('"+dr["Name"].ToString()+"')\">"+dr["Name"].ToString()+"</a>";
}
//将HTML打印到前台,用以返回给上一个页面
Response.Write(HTML);
给你一个我的思路,我用的asp.net语言。
文件需求:一个显示调用页面,命名为a。aspx;一个ajax后台返回数据页,命名为ajax。aspx
页面布置:a.aspx 中写入操作内容,一个ajax调用方法,一个选定值方法,一个div接收返回HTML,名为为div_data
一,//ajax调用方法
function DoAjax(val){
$("#div_data").show();
var url = "Ajax.aspx?val="+val;
$.get(url, function(data) {
//data为ajax返回数据,字符串类型
$("#div_data").attr("innerHTML",data); })
}
//选定值方法,并复制给一个输入框(id为txt_data)
function selectData(val){
$("#txt_data").attr("value",val);
$("#div_data").hide();
}
//两个txt,一个div
<input type='text' onkeyup="DoAjax this.value)"/>
<div id='div_data'></div>
<input type='text' id='txt_data'/>
二,//ajax.aspx接收参数值,根据参数值获得数据并拼接为HTML返回
//没有HTML代码,后台输出HTML//后台代码如下
string param=request.QueryString["val"];
//此处为根据参数查询数据库,获得列表数据datatable或其他数据集合都可以
DataTable dt=GetDataTable(val);
//循环dataTable,编写格式输出HTML
string HTML="";
foreach(DataRow dr in dt.Rows){
HTML+="<a href='JavaScript:void(0)' onclick=\"SelectData('"+dr["Name"].ToString()+"')\">"+dr["Name"].ToString()+"</a>";
}
//将HTML打印到前台,用以返回给上一个页面
Response.Write(HTML);
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询