技術標籤：高階下拉ajaxphp

<input name="yewuyuan" autocomplete="off" id="yewuyuan" class="input" value="<?=$yewuyuan?>" type="text" style="background-color:#FFFFFF;width:120px;" />  
<style>
#dianjiyewuyuan{ display:block; width:100%; text-align:center; height:22px;}
 

</style>
<div style="position:relative; display:none;" id="yeWuxian">//預設為隱藏
    <div id="yewuxialakuang" style="position:absolute;top:0px; left:0px; z-index:999; background-color:#fff; width:100%;border: 1px solid #009688;">
    </div>
</div>
 

//注意引用JQ檔案，這個JS是輸入一個字元就會通過ajax傳送請求，並且在反饋回來！！
<script type="text/javascript">
window.onload=function(){
  var yewuyuan=document.getElementById("yewuyuan");
  if(document.all){
	 yewuyuan.onpropertychange=function(){//檢測表單內容發生變化
		 document.getElementById("yeWuxian").style.
 
display="block";
		var otxt = $("#yewuyuan").val();
			if(otxt){//不為空
				$.ajax({
					url : "ajax_tijiao.php",//提交給ajax_index.php頁面，後面跟隨當前資訊ID
					data : {
								act : 'yewuyuan',
								inputVale : encodeURI(encodeURI(otxt)),
							}, //引數Json格式
					dataType : "json", //請求的返回型別
					type : "GET",  //提交方式
					cache : false,  //是否非同步提交true
					success : function(data){
						var info = data.subjects;
						var inforlenth = data.subjects_CHANGDU;
						if(inforlenth){
							$("#yewuxialakuang a").remove();
							$.each(info,function(index,value){
							  $("#yewuxialakuang").append("<a id='dianjiyewuyuan' href='javascript:;' data-id="+value.id+">"+value.name+"</a>")
							});
						}else{
							  //$("#yewuxialakuang").html("<a href='javascript:;'>無結果</a>")
						}
					}
				});												
			}else{										  
		     document.getElementById("yeWuxian").style.display="none"; //為空隱藏下拉框
		   }
	 }
  }
  else{
	yewuyuan.oninput=function(){//檢測表單內容發生變化
		 document.getElementById("yeWuxian").style.display="block";
			var otxt = $("#yewuyuan").val();//獲取輸入框的值
		if(otxt){//不為空
			$.ajax({
				url : "ajax_tijiao.php",
				data : {
							act : 'yewuyuan',
							inputVale : encodeURI(encodeURI(otxt)),//因為我的頁面編碼為GBK，中文需要轉碼
						}, 
				dataType : "json",//以json格式返回
				type : "GET", 
				cache : false,
				success : function(data){
					var info = data.subjects;//獲取返回資料
					var inforlenth = data.subjects_CHANGDU;//獲取返回資料個數
					if(inforlenth){
						$("#yewuxialakuang a").remove();//每次都是先清除上次輸入的a標籤
						$.each(info,function(index,value){
						  $("#yewuxialakuang").append("<a id='dianjiyewuyuan' href='javascript:;' data-id="+value.id+">"+value.name+"</a>")//新增的a標籤
						});
					}else if(inforlenth){
						 // $("#yewuxialakuang").html("<a href='javascript:;'>無結果</a>")
					}
				}
			});	
		}else{										  
		document.getElementById("yeWuxian").style.display="none"; //為空隱藏下拉框
		}
	}
  }
}
$(document).on('click', '#dianjiyewuyuan', function() {
	var	jiao_Id = $(this).attr("data-id");//獲取a標籤中資料的ID值
	var	jiao_Html= $(this).text();//獲取a標籤中html的值
	document.getElementById("yewuyuan").value=jiao_Html;//賦值
	document.getElementById("yeWuxian").style.display="none"; //賦值
});	
</script>

$inputVale = $_GET["inputVale"];
if($_GET["act"]=="yewuyuan" && $inputVale<>''){
	$infoArray= array();
	$infoArray["subjects"] = array();
	$asdnamei2 = iconv("utf-8","gb2312",urldecode(iconv("utf-8","gb2312",urldecode($_GET["inputVale"]))));//php雙解碼
	$sql = "select * from php_admin where (1=1) and name like '%".$asdnamei2."%'"; 
	$result = mysqli_query($conn,$sql); 
	$num=mysqli_num_rows($result);
	if($num){
		$ij=0;
		do{$rs=mysqli_fetch_array($result);$ij++;
			if($rs["name"]==''){
				$name = '';
			}else{
				$name = $rs["name"];
			}
			$textcc=iconv("GBK","UTF-8",$name);//編碼轉換
			$infoArray["subjects"][$ij]["id"] = $rs["id"];
			$infoArray["subjects"][$ij]["name"] = $textcc;
		}while($ij<$num);
	}else{
		$infoArray["subjects"] = $num;
	}
	$infoArray["subjects_CHANGDU"] = $num;
	$josn = json_encode($infoArray, true);
	echo $josn;//反饋輸出資料
	exit;
}

這裡可以看到改變一次輸入框的內容，請求傳送一次，AJAX反饋也就一次。