php+ajax做仿百度搜索下拉自動提示框
PHP+mysql+ajax實現百度搜索下拉提示框 主要有3個文件三個文件在同一個目錄裏 如下圖 下面是三個文件的代碼 把sql文件導入到mysql數據庫裏 修改下數據庫密碼爲自己的 記得哦是UTF-8編碼。
下面是三個文件的.代碼 把sql文件導入到mysql數據庫裏 修改下數據庫密碼爲自己的 記得哦是UTF-8編碼
php+mysql+ajax實現百度搜索下拉提示框
效果圖
php+mysql+ajax實現百度搜索下拉提示框
文件
複製代碼 代碼如下:
<?php
mysql_connect('localhost', 'root' ,'');
mysql_select_db("test");
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$sql= "SELECT value FROM countries WHERE value LIKE '".$queryString."%' LIMIT 10";
$query = mysql_query($sql);
while ($result = mysql_fetch_array($query,MYSQL_BOTH)){
$value=$result['value'];
echo '<li onClick="fill(''.$value.'');">'.$value.'</li>';
}
}
?>
文件
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function lookup(inputString) {
if(th == 0) {
// Hide the suggestion box.
$('#suggestions')();
} else {
$("", {queryString: ""+inputString+""}, function(data){
if(th >0) {
$('#suggestions')();
$('#autoSuggestionsList')(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString')(thisValue);
setTimeout("$('#suggestions')();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
estionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
estionList {
margin: 0px;
padding: 0px;
}
estionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
estionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<p>
<form>
<p>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(e);" onblur="fill();" />
</p>
<p class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<p class="suggestionList" id="autoSuggestionsList">
</p>
</p>
</form>
</p>
</body>
</html>
sql數據庫文件(導入到mysql)
複製代碼 代碼如下:
-- phpMyAdmin SQL Dump
-- version 3.3.5
--
--
-- 主機: localhost
-- 生成日期: 2010 年 12 月 09 日 02:36
-- 服務器版本: 5.0.22
-- PHP 版本: 5.2.14
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- 數據庫: `test`
--
-- --------------------------------------------------------
--
-- 表的結構 `countries`
相關文章
-
php+ajax實時輸入自動搜索匹配的方法
文章主要介紹了php+ajax實時輸入自動搜索匹配的方法,實例分析了兩種實現方法,是非常實用的技巧,需要的朋友可以參考下。本文實例講述了php+ajax實輸入自動搜索匹配的方法分享給大家供大家參考。具體分析如下:第一種方 -
jquery+php實現搜索框自動提示
同志們:今天是我們的週一集中時間,往常的週一集中是單一的安排工作,今天集中則意義不同,具有多重含義,既是一次集中例會,又是一次話別會歡送會。我們的付主席到醫藥公司工作,班長書記通過這次縣委考覈勝利回城,到編委工作,實現 -
PHP處理Ajax請求與Ajax跨域問題
這篇文章主要介紹了PHP處理Ajax請求與Ajax跨域問題的相關資料,非常不錯,具有參考借鑑價值,需要的朋友可以參考下,就跟隨本站小編一起去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網! PHP判斷是否爲Aja -
PHP+jQuery+Ajax仿淘寶多上傳按鈕單文件上傳
如何做一個仿淘寶多上傳的`按鈕單文件上傳呢?下面是由本站小編爲大家整理的PHP+jQuery+Ajax仿淘寶多上傳按鈕單文件上傳,喜歡的可以收藏一下!瞭解更多詳情資訊,請關注應屆畢業生考試網! 其代碼如下: -
Java import以及Java類的搜索路徑
Java 官方爲開發者提供了很多功能強大的類,這些類被分別放在各個包中,隨JDK一起發佈,稱爲Java類庫或Java API。下面小編爲你分享Java import以及Java類的搜索路徑,歡迎大家閱讀!更多相關信息請關注相關欄目!如果你希望使用J -
php採用ajax數據提交post與post常見方法總結
居住房屋租賃合同 篇1出租方:_______________________(以下簡稱甲方)承租方:_______________________ (以下簡稱乙方)甲乙雙方經協商,於______年 ______ 月 ______ 日訂立本租房合同,並就以下各條款達成協議:第一條:租賃範 -
ajax解決的下拉框的onchange問題
1、爲人類的幸福而勞動,這是多麼壯麗的事業,這個目的有多麼偉大! —— 聖西門2、每一個人可能的最大幸福是在全體人所實現的最大幸福之中。 —— 左拉3、真正的幸福只有當你真實地認識到人生的價值 -
php啓用sphinx全文搜索的方法
主要介紹了php啓用sphinx全文搜索的實現方法,詳細講述了sphinx相關的配置與使用技巧,具有一定的參考借鑑價值,需要的朋友可以參考下。本文實例講述了php啓用sphinx全文搜索的實現方法。分享給大家供大家參考。具體分 -
PHP+Ajax+lottery.js抽獎
想用PHP來做一個抽獎的頁面?下面是由本站小編爲大家整理的PHP+Ajax+抽獎整個流程,喜歡的可以收藏一下!瞭解更多詳情資訊,請關注應屆畢業生考試網! 其代碼如下: 獎品列表 <div class="lottery_list -
PHP中檢測ajax請求的代碼實例
導語:多數情況下,基於JavaScript 的Js框架如jquery、Mootools、Prototype等,在發出Ajax請求指令時,都會發送額外的 HTTP_X_REQUESTED_WITH 頭部信息,就當是一個ajax請求,因此你可以在服務器端檢測到這些Ajax請求。下面的是Y