ajax+php 谷歌搜索框自動(dòng)填充功能 實(shí)例代碼
<html>
<head>
<script language="javascript"><!--
var http_request;
function update(v){
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange=out;
var url="tp.phtml?worksheet="+v.value;
http_request.open('GET',url,true);
http_request.send(null);
}
function out(){
if(http_request.readyState == 4){
var div=document.getElementById('out');
if(http_request.responseText!='') {
div.style.display='block';
div.innerHTML=http_request.responseText;
//alert(div.innerHTML);
}else{
div.style.display='none';
div.innerHTML='';
}
}
}
function end(val){
document.getElementById('ws').value=val;
document.getElementById('out').innerHTML='';
document.getElementById('out').style.display='none';
}
// --></script>
<style><!--
.test{
display:none;
z-index:100;
width:150px;
top:20px;
left:0px;
height:auto;
background-color:lightgrey;
border:1px solid;
position:absolute;
}
a:link {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:black;
}
--></style>
</head>
<body>
<div style="position:relative;" style="position:relative;">
<input type='txt' id='ws' name='ws' value='' onPropertyChange='update(this);' oninput='update(this);'/> <div id='out' class='test'></div>
<div>
<input type='txt' id='d'/>
</body>
</html>
頁(yè)面一
<?
include("include/db.inc");
$ws=$_GET['worksheet'];
if(empty($ws)||strlen($ws)<3){
//echo 'oo';
exit();
}
$db=new db();
$str='';
$sql="select * from user where deptID=10 and status='On' and worksheet like '%$ws%' order by worksheet";
$rt=$db->rtAssoc($sql);
while($row=array_shift($rt)){
$str.="<a href="\" href="\""#\" onclick=\"end('"
.$row['emp_name'].':'.$row['emp_worksheet']."');\">"
.$row['emp_name'].':'.$row['emp_worksheet']
.'</a>,<br/>';
}
$str=substr($str,0,-6);
echo trim($str);
exit();
?>
頁(yè)面二。
這個(gè)東西功能上模仿谷歌,但是效果很不理想。一般簡(jiǎn)單的應(yīng)用可以滿(mǎn)足
- ThinkPHP實(shí)現(xiàn)ajax仿官網(wǎng)搜索功能實(shí)例
- Thinkphp搜索時(shí)首頁(yè)分頁(yè)和搜索頁(yè)保持條件分頁(yè)的方法
- ThinkPHP讓分頁(yè)保持搜索狀態(tài)的方法
- ThinkPHP使用getlist方法實(shí)現(xiàn)數(shù)據(jù)搜索功能示例
- ThinkPHP設(shè)置禁止百度等搜索引擎轉(zhuǎn)碼(簡(jiǎn)單實(shí)用)
- php+ajax實(shí)時(shí)輸入自動(dòng)搜索匹配的方法
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- php+ajax實(shí)現(xiàn)仿百度查詢(xún)下拉內(nèi)容功能示例
- thinkPHP+mysql+ajax實(shí)現(xiàn)的仿百度一下即時(shí)搜索效果詳解
相關(guān)文章
通過(guò)history解決ajax不支持前進(jìn)/后退/刷新的問(wèn)題
下面小編就為大家?guī)?lái)一篇通過(guò)history解決ajax不支持前進(jìn)/后退/刷新的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07使用Ajax方法實(shí)現(xiàn)Form表單的提交及注意事項(xiàng)
這篇文章主要介紹了使用Ajax方法實(shí)現(xiàn)Form表單的提交及注意事項(xiàng),需要的朋友可以參考下2017-07-07jQuery中ajax - post() 方法實(shí)例詳解
在jquery中的ajax有二個(gè)數(shù)據(jù)發(fā)送模式,一種是get,另一種是post(),下面我來(lái)給大家介紹介紹,有需要了解的朋友可參考2015-09-09通過(guò)Ajax方式上傳文件使用FormData進(jìn)行Ajax請(qǐng)求
這篇文章主要介紹了通過(guò)Ajax方式上傳文件使用FormData進(jìn)行Ajax請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2016-08-08ajax中設(shè)置contentType: "application/json"的作用
這篇文章主要介紹了ajax中設(shè)置contentType: “application/json”的作用,需要的朋友可以參考下2018-04-04一款經(jīng)典的ajax登錄頁(yè)面 后臺(tái)asp.net
眾所周知,用服務(wù)器控件做頁(yè)面的登錄窗體時(shí)很簡(jiǎn)單的,但是頁(yè)面的多次回傳讓我們感覺(jué)到頭痛,一直刷新頁(yè)面的感覺(jué)非常之不好,其實(shí)用ajax的局部刷新功能可以完全解決這個(gè)問(wèn)題,制作出來(lái)的頁(yè)面有很好的交互性,而且是局部刷新,節(jié)省網(wǎng)絡(luò)資源。2009-10-10ajax JSONP請(qǐng)求處理回調(diào)函數(shù)jsonpCallback區(qū)分大小寫(xiě)
使用ajax進(jìn)行 JSONP跨域請(qǐng)求,因?yàn)楸徽?qǐng)求的對(duì)方的回調(diào)函數(shù)名稱(chēng)是無(wú)法修改,想到設(shè)置AJAX 的JSONP參數(shù)。但是發(fā)現(xiàn)根本不起作用。最后偶然發(fā)現(xiàn) jsonpcallback是區(qū)分大小寫(xiě)的2013-09-09Ajax中responseText返回的是一個(gè)頁(yè)面而不是一個(gè)值
用response返回的內(nèi)容卻是一個(gè)頁(yè)面的,可以將String 類(lèi)型改為void 這樣返回的就不是整個(gè)頁(yè)面了2014-05-05