ajax+php实现自动提示文本框

前端之家收集整理的这篇文章主要介绍了ajax+php实现自动提示文本框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

==jquery想拽没拽明白==


html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input{font-size:12px;border:#000000 1px solid;width:200px;padding: 1px;margin:0px;  }
        #popBox{
            color: #666666;font-size: 12px;positon:absolute;width:202px;left:42px;top:25px;}
        #popBox.show{border:#666666 1px solid;}
        #pop.hide{border:none;}
        ul{list-style:none;margin:0px;padding:0px;}
        li.mouSEOver{background-color: #666666;color:#FFFFFF;}
        li.mouSEOver{background-color: #666666;color:#FFFFFF;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var xmlhttp;
        var objInput;
        var objDiv;
        var objUI;
        function createXMLHttpRequest(){
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        function init(){
            objInput=$("input").val();//text()是获取网页中文本原来就有的文字
            objDiv=document.getElementById("popBox");
            objUI=document.getElementById("colors_ul");
        }
        function clear(){
            for(var i=objUI.childNodes.length-1;i>=0;i--)
                objUI.removeChild(objUI.childNodes[i]);
        }
        function setprovince(resultprovinces){
           // objDiv.innerHTML="";
            objDiv.className="show";
            var objLi;
            for(var i=0;i<resultprovinces.length;i++){
                objLi=document.createElement("li");
                objUI.appendChild(objLi);
                objLi.appendChild(document.createTextNode(resultprovinces[i]));
                objLi.onMouSEOver=function(){this.className="mouSEOver";}
                objLi.onMouSEOut=function(){this.className="mouSEOut";}
                objLi.onclick=function(){objInput.value=this.firstChild.nodeValue;}
            }
        }
        function findprovince(){
            init();
            clear();
            if(objInput.length>0){
                createXMLHttpRequest();
                var url="http://localhost/ajax/input.PHP?provinces="+objInput+"×stamp="+new Date().getTime();
                xmlhttp.open("GET",url);
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4&&xmlhttp.status==200){
                     //   alert("ok");
                        var result=new Array();
                        if(xmlhttp.responseText.length){
                           // alert(xmlhttp.responseText);
                            result=xmlhttp.responseText.toString().split(",");
                          //  alert(result);
                            setprovince(result);
                        }
                       // else clear();
                    }
                    return true;
                }
                xmlhttp.send(null);
            }
          //  else clear();
        }
    </script>
</head>
<body>
<form id="form1" method="post" name="form1">
    <input type="text" name="city" id="city" onkeyup="findprovince();">
</form>
<div id="popBox">
    <ul id="colors_ul"></ul>
</div>
</body>
</html>

PHP
<?PHP
/**
 * Created by PHPStorm.
 * User: admin-pc
 * Date: 2016/6/10
 * Time: 21:45
 */
header('Content-Type:text/html;charset=gb2312');//这句话必须加!!!
$provinces=array("beijing","tianjin","shanghai","chongqing","hebei","henan","heilongjiang","jilin","changchun","shandong","anhui","shanxi","guangzhou","yunnan","hainan","xizang","qinghai","fujian","guizhou","jiangsu","zhejiang","yunan","neimenggu","sichuan","gansu","ningxia","xianggang","aomen");
//$provinces.sort();
$tmp=$_GET["provinces"];
$ans="";
//var_dump($provinces);
for($i=0;$i<31;$i++){
   // echo"===";echo "i=".$provinces[$i];echo"===";echo "<br>";
    $tt=strpos($provinces[$i],$tmp);
    //var_dump($tt);  echo"<br>";
    if(strpos($provinces[$i],$tmp)!==false){//indexof是C#的用法 !!特么的就不能起一样的函数名,反正作用都一样
        $ans=($provinces[$i].",").$ans;
       // echo $provinces[$i].",";
     //   echo "  ";
    //    echo '$ans='.$ans;
    //    echo "<br>";
    }
    
   // echo '$ans=='.$ans;
 //   echo "endl";
  //  echo "<br>";
}
//if(count($ans)>0) $ans=substr($ans,count($provinces)-1);
echo $ans;

另:昨天晚上心血来潮把PHPstorm的端口号改成80了,今天早上发现wamp不能用了,那不废话么,咋可能两个不同的服务用相同的端口号==又老老实实改回去了 原文链接:https://www.f2er.com/ajax/162116.html

猜你在找的Ajax相关文章