使用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;

?>
可是想要的效果出不来怎么改呀？展开

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

Kevin_Handsome
推荐于2018-05-07 · TA获得超过335个赞

知道小有建树答主

回答量：112

采纳率：0%

帮助的人：93.4万

我也去答题访问个人页

关注

展开全部

没看你的代码，我一般都用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);


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

MarsCode
2024-08-21 广告

在北京引力弹弓科技有限公司，JavaScript是我们技术栈中不可或缺的一环。它赋予了我们网页动态交互的能力，使我们能够开发出既美观又高效的前端应用。我们利用JavaScript优化用户体验，通过异步请求、DOM操作、以及现代前端框架（如R... 点击进入详情页

本回答由MarsCode提供

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

使用ajax实现的功能，在一个框中输入关键字，自动输出提示信息获取id并填入到另一框中？

其他类似问题

为你推荐：