ajax實(shí)現(xiàn)輸入提示效果
更新時(shí)間：2017年10月30日 17:20:54 作者：迪恩杰
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)輸入提示效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了ajax實(shí)現(xiàn)輸入提示效果的具體代碼，供大家參考，具體內(nèi)容如下
網(wǎng)站主頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px auto;
padding:0px;
}
.l{
height:50px;
width:198px;
border-bottom:1px solid black;
text-align: center;
line-height:40px;
vertical-align: middle;
}
</style>
<script src="../wenjian/jquery-2.2.3.min.js"></script>
</head>
<body>
<div style="height: 50px;width: 200px"><input type="text" id="name" style="width: 198px;height: 48px;"></div>
<div id="list" style="height: 500px;width: 200px;border: 1px solid black">
<!--<div id="l">zhongguo</div>-->
</div>
</body>
</html>
<script>
$("#name").keyup(function () {
var n = $("#name").val();
if (n != ""){
$.ajax({
url:'ltchuli.php',
data:{n:n},
type:'post',
// dataType:'text',
dataType:'json',
success:function (data) {
//text寫法
// var s = data.split("|");
// var str = "";
// for (var i=0;i<s.length;i++)
// {
// str = str + "<div class='l'>" +s[i] +"</div>";
// }
// $("#list").html(str);
//json寫法
for (var i in data){
$("#list").append("<div class='l'>" +data[i] +"</div>");
}
}
});
}else {
$("#list").html("");
}
})
</script>
處理頁面
<?php
/**
* Created by fcc
* User: Administrator
* Date: 2017/10/30
* Time: 9:52
*/
$n = $_POST['n'];
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$obj = "select region_name from region WHERE region_name LIKE '%{$n}%' ";
$data = $db->Query($obj);
//echo $data;
echo json_encode($data);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery ajax請求方式與提示用戶正在處理請稍等
- php+ajax做仿百度搜索下拉自動提示框(有實(shí)例)
- ajax 自動完成下拉框 自動提示位置問題
- asp+ajax仿google搜索提示效果代碼
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
- jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
- 使用jQuery全局事件ajaxStart為特定請求實(shí)現(xiàn)提示效果的代碼
- Ajax實(shí)現(xiàn)智能提示搜索功能
- Ajax帶提示的驗(yàn)證表單實(shí)例
- jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開提示錯(cuò)誤的bug解決方法
相關(guān)文章
基于Ajax實(shí)現(xiàn)下拉框聯(lián)動顯示數(shù)據(jù)
本篇文章給大家介紹基于ajax實(shí)現(xiàn)下拉框聯(lián)動顯示數(shù)據(jù)，代碼非常簡單，需要的朋友可以參考下2015-09-09
AJAX開發(fā)簡略 (第一部分)...2006-12-12
AjaxFileUpload結(jié)合Struts2實(shí)現(xiàn)多文件上傳(動態(tài)添加文件上傳框)
本文是腳本之家小編給大家分享的AjaxFileUpload結(jié)合Struts2實(shí)現(xiàn)多文件上傳功能，如果項(xiàng)目需求是不確定多少個(gè)文件，我們需要?jiǎng)討B(tài)的添加文件上傳框，具體實(shí)現(xiàn)代碼大家參考下本文2017-09-09
javascript ajax類AJAXRequest2007-12-31 更新
2008-01-01
那些年，我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記
Ajax不用說，每個(gè)做web開發(fā)的同志都知道，因?yàn)樗菍W(xué)習(xí)web開發(fā)必經(jīng)之路，不管你是做asp.net，還是javaWeb，還是PHP2012-03-03
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù),在不重新加載整個(gè)頁面的情況下,通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)分頁查詢功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
菜鳥蔡之Ajax復(fù)習(xí)第二篇(JQuery中的load()方法實(shí)現(xiàn)Ajax功能)
在上一篇博客中寫到的是在傳統(tǒng)的Javascript中使用XMLHttpRequest對象異步加載數(shù)據(jù)的，唉，童鞋.......看到那些代碼是不是有點(diǎn)頭疼啊!呵呵......2012-11-11
經(jīng)過前3篇的ajax實(shí)例教程的學(xué)習(xí)，我想各位已經(jīng)能夠使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀取工作．2010-10-10
ajax提交手機(jī)號去數(shù)據(jù)庫驗(yàn)證并返回狀態(tài)值
這篇文章主要為大家詳細(xì)介紹了ajax提交手機(jī)號去數(shù)據(jù)庫驗(yàn)證并返回狀態(tài)值的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01