动态下拉框的实现

Question

页面中的文本框，要求客户填写的时候，如果是有相似值的话，填充到下拉菜单中去 
比如很多邮箱登陆的时候都有，当客户输入：012的时候，下拉自动出现0121,0129,01288,012521... 
在数据库中的center表的c_number字段中去查找 
select c_number from center where c_number like '012%' 
然后填充到下拉列表供选择！ 
各位大哥帮帮忙，给个完整的解决案例好像可以用ajax动态提交后返回下拉框的值？ 
但是不知道怎么去实现

Answer 1

可以用jQuery的$.ajax实现 <input type=text value="" onkeyup="s_ajax(this.value)"/><script type="text/css">
function s_ajax(val){
 $.ajax({
    type:'post',
    url:'处理查询的页面地址',
    data:{keyword:val},
    success:function(data){
      //alert(data);data是返回的数据;
    在这里处理返回的数据;
},
    error:function(){
    alert("加载失败");//加载失败将如何反应,可省略
}
})
}
 注:需要jQuery框架支持
</script>

Answer 2

我睡觉去了，好困，有不懂的可以去我的博客看相关文章 http://www.izmax.cn

Answer 3

就是ajax实现的，在服务器端查询匹配的结果，在responseText或responseXML里返回。
然后通过JS操作把信息加载显示。

Answer 4

给你个例子。
var http_req = null;
function p1_Req()
{
      if(http_req.readyState==4)
{
         if(http_req.status==200)
{
            var ret = http_req.responseText;
if(ret!=null&&ret!="")
{
                               var sel =  document.getElementById("mySelect");
//清空全来的SELECT选项
                       while(sel.options.length>0)
                                {
                                     sel.options.removeChild(sel.options[0]);
                                }
//处理返回的信息并动态添加到select里面去
        var c = ret.split(",");
                       for(var i=0;i<c.length;i++)
                                {
                                       var op = document.createElement("option");
                                       op.text = ret[i];
                                       op.value = ret[i];
                                       document.getElementById("mySelect").appendChild(op);
                                }
}
         }
else
{
            alert("您所请求的页面有异常。");
         }
      }
}
function s1_req(url)
{
    http_req=false;
    try
{
       http_req = new ActiveXObject("Msxml2.XMLHTTP");
    }
catch(e)
{
       try
{
          http_req = new ActiveXObject("Microsoft.XMLHTTP");
       }
catch(e)
{
}
    }
    if(!http_req)
{
      alert("不能创建XMLHttpRequest对象实例。");
      return false;
    }
    http_req.onreadystatechange = p1_Req;
    http_req.open("GET",url,true);
    http_req.send(null);
}服务器端
out.clear();
StringBuffer ret = "";
ResultSet rs = ……;
rs.beforeFirst;
while(rs.next){
   ret = ret+","+rs.getString(1);
}
if(ret!="")
   ret = ret.substring(1);
out.print(ret);

Answer 5

不一定非要用 ajax, 如果客户填写的内容种类有限的话，如果不超过300条，而且内容也不太长的情况下，可以一次把信息写在页面中，在客户端使用 javascript 来实现过滤后再提示。
如果内容较多，则需要考虑 IFrame 或 ajax 来实现了，现在 ajax 时髦啊

Answer 6

用ajax吧，文本框和div来模拟就是了

Answer 7

text + ajax + select

Answer 8

text + ajax + select就是这个意思就是不会ajax，还有就是这么实现用户在text中输入的时候，自动出来相似内容的下拉这个是问题啊，有没有代码参考？

Answer 9

有道理.AJAX也不是那么好玩的.而且每次都要请求.

Answer 10

已找到解决方法 但是有个问题 var j=-1;
var temp_str;
var $=function(node){
return document.getElementById(node);
}
var $$=function(node){
return document.getElementsByTagName(node);
}
function ajax_keyword(){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
$("suggest").innerHTML=data;
j=-1;
}
}
}
xmlhttp.open("post", "ajax_result.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("keyword="+escape($("keyword").value));
}
function keyupdeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc!=40 && keyc!=38){
ajax_keyword();
temp_str=$("keyword").value;
}
} function set_style(num){
for(var i=0;i<$$("li").length;i++){
var li_node=$$("li")[i];
li_node.className="";
}
if(j>=0 && j<$$("li").length){
var i_node=$$("li")[j];
$$("li")[j].className="select";
}
}
function mo(nodevalue){
j=nodevalue;
set_style(j);
}
function form_submit(){
if(j>=0 && j<$$("li").length){
$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
}
document.search.submit();
}
function hide_suggest(){
var nodes=document.body.childNodes
for(var i=0;i<nodes.length;i++){
if(nodes[i]!=$("keyword")){
$("suggest").innerHTML="";
}
}
}

function keydowndeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc==40 || keyc==38){
if(keyc==40){
if(j<$$("li").length){
j++;
if(j>=$$("li").length){
j=-1;
}
}
if(j>=$$("li").length){
j=-1;
}
}
if(keyc==38){
if(j>=0){
j--;
if(j<=-1){
j=$$("li").length;
}
}
else{
j=$$("li").length-1;
}
}
set_style(j);
if(j>=0 && j<$$("li").length){
$("keyword").value=$$("li")[j].childNodes[0].nodeValue;
}
else{
$("keyword").value=temp_str;
}
}
}这个js为什么传递不过来中文呢？

Answer 11

修改
("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"); 又会提示下一行的错误：xmlhttp.send("keyword="+escape($("keyword").value));
行:28
字符:79
代码:0
错误:缺少 ')'