仿百度搜索输入框提示js代码(php+mysql数据库版),php+ajax做仿百度搜索下拉自动提示框...

php+ajax做仿百度搜索下拉自动提示框

php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码。

下面是三个文件的.代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码

php+mysql+ajax实现百度搜索下拉提示框

效果图

php+mysql+ajax实现百度搜索下拉提示框

rpc.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 '

'.$value.'';

}

}

?>

index.htm文件

复制代码 代码如下:

Ajax Auto Suggest

function lookup(inputString) {

if(inputString.length == 0) {

// Hide the suggestion box.

$('#suggestions').hide();

} else {

$.post("rpc.php", {queryString: ""+inputString+""}, function(data){

if(data.length >0) {

$('#suggestions').show();

$('#autoSuggestionsList').html(data);

}

});

}

} // lookup

function fill(thisValue) {

$('#inputString').val(thisValue);

setTimeout("$('#suggestions').hide();", 200);

}

body {

font-family: Helvetica;

font-size: 11px;

color: #000;

}

h3 {

margin: 0px;

padding: 0px;

}

.suggestionsBox {

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;

}

.suggestionList {

margin: 0px;

padding: 0px;

}

.suggestionList li {

margin: 0px 0px 3px 0px;

padding: 3px;

cursor: pointer;

}

.suggestionList li:hover {

background-color: #659CD8;

}

Type your county:

sql数据库autoComplete.sql文件(导入到mysql)

复制代码 代码如下:

-- phpMyAdmin SQL Dump

-- version 3.3.5

-- http://www.phpmyadmin.net

--

-- 主机: localhost

-- 生成日期: 2010 年 12 月 09 日 02:36

-- 服务器版本: 5.0.22

-- PHP 版本: 5.2.14

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--

-- 数据库: `test`

--

-- --------------------------------------------------------

--

-- 表的结构 `countries`