<INPUT TYPE="text" NAME="" onpropertychange="alert(this.value)">+  ajax不过这个设计感觉有问题,访问后台太频繁了,时间不一定来的及反应

解决方案 »

  1.   

    就是CSDN网站提问,写问题题目时候显示的效果,!
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax</title>
    <script>
    /* SuperHandler class. ajax连接超类*/
    var SuperHandler = function() {}; // implements AjaxHandler 实现AjaxHandler
    SuperHandler.prototype = {
      request: function(method, url, callback, action, postVars) {
        var xhr = this.createXhrObject();
        xhr.onreadystatechange = function() {
          if(xhr.readyState !== 4) return;
          (xhr.status === 200) ? 
            callback.success(xhr.responseText, xhr.responseXML) : 
            callback.failure(xhr.status);
        };
        xhr.open(method, url, true);
    switch (action){//发送模式 0 简单提交 return string 
    case 0:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');break;}//发送模式 1 返回静态xml doc return xml 
    case 1:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');break;}//发送模式 1 获取静态doc return ?? 
    case 2:{xhr.setRequestHeader("Content-Type","text/xml"); break;}//发送模式 2 获取静态doc return  
    case 3:{break;}//发送模式 2 获取静态doc return ?? 
    default:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');break;}
    }
        if(method !== 'POST') postVars = null;
        xhr.send(postVars);
      },
      createXhrObject: function() { // Factory method.
    if(window.XMLHttpRequest){var objXMLHttp = new XMLHttpRequest();}else{ 
    var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP']; 
    for(var n = 0;n < MSXML.length;n++){try{ var objXMLHttp = new ActiveXObject(MSXML[n]); break; }catch(e1){}} }
        // If we reach this point, none of the methods worked.
    if(objXMLHttp){
    return objXMLHttp;
    }else{
    throw new Error('SuperHandler: Could not create an XHR object.');
    }
      } 
    };function getDatabaseInner(value){ var serverAddress="xxx";//这里写你的动态页面地址或其他数据来源
      var postBody="retvalue="+encodeURI(value);
    var postFlag="POST";

    var exh=new SuperHandler();
    exh.request(postFlag,serverAddress, callDatabaseInner ,0,postBody)
    exh=null;
    }
    var callDatabaseInner={
      success: function() {
      var inner = arguments[0];
      document.getElementById("DatabaseInner").innerHTML=inner;
    return ;
      }, 
       failure: function(statusCode) {  document.getElementById("DatabaseInner").innerHTML=""; } 
    };</script>
    </head><body>
    <input type="text" onKeyPress="getDatabaseInner(this.value);">
    <div id="DatabaseInner"></div>
    </body>
    </html>
      

  3.   

    看样子你是想实现csdn的即时关键字查询了就用上面方法吧
      

  4.   

    <style type="text/css">
      #list,#name{
        width:100px;
    border:solid 1px green;
      }
      .show{
        display:block;
      }
      .hide{
        display:none;
      }
    </style>
    <input type="text" id="name" />
    <div id="list" class="hide"></div>
    <script type="text/javascript">
      var data = ['test','right','good','list','spl','teag','gfjka','ljfkd','sjk','ttt','teafe']
      var name = document.getElementById('name');
      var list = document.getElementById('list');
      name.onkeyup = function(){
        var text = name.value;
    var lists = '';
    if(text != ''){
      list.className = 'show';
      for(i=0;i<data.length;i++){
       if(data[i].indexOf(text) == 0) lists += data[i] + '<br/>';
      }
      list.innerHTML = lists;
    }else{
      list.innerHTML = '';
      list.className = 'hide'
    }
      }
    </script>以上代码是个纯静态的,你可以用Ajax同服务器进行交互
      

  5.   

    打开页面的时候先把数据库的内容取出存起,然后输入查询的时候掉ajax实现吧,要不查询数据库太频繁了
      

  6.   

    在APP启动时加载了--进入高速缓冲区。
    在 X---对应的就N多!即是是AJAX也追不是输入很快的人! 基本都是内存索引!
      

  7.   

    其实还好啦,毕竟后模糊是用得到高效索引的
    AJAX可以满足楼主的需求
      

  8.   

    总觉得这样设计不太合理,访问数据库,如果数据很固定的话把数据下载到客户端,用xml格式,根据输入动态瓶装数据会好一些。
      

  9.   

    用AJAX 实现比较好。说实话我不是很会。
    如果不用ajax 的话,实现起来比较麻烦。但是笨方法我用过,我也做过这样类型的东西,我做的是有两个栏目,一个顶级栏目,选择顶级栏目出现它相对应的的下级栏目。
    跳转页面进行查询数据库。
    <input type="text" onblur="find()"><script language="javascript">
        function find(){
          //这个方法去到后台执行查询,然后再跳转到这个界面。
           //注意要把条件保存。    
        }</script>
      

  10.   

    如果这个输入框不和其他输入框联动,最好是将这个输入框有关的值在加载页面的时候一次性找出来,当该框输入的时候直接查找页面的值,进行匹配,然后将匹配的值显示在该输入框的下面(用层或者createPop显示匹配的内容);
    如果需要联动的话,可以设置一个属性,每次输入数据的时候判断该属性,需要重新从数据库提取数据则用ajax提取数据(这里用ajax提取数据最好是设置ajax的异步属性为false,也就是同步,不然提取数据可能跟不上输入的节奏)