php+mysql+ajax は Baidu を模倣した Google 検索ドロップダウン自動プロンプト ボックス効果_PHP チュートリアル

Baidu Google を使用すると、単語を入力する限り、関連するプロンプトが表示されることがわかります。これにより、Web サイトのエクスペリエンスが大幅に向上しました。Baidu Google 検索を模倣した php+mysql+ajax について学習します。ドロップダウン自動 プロンプト ボックス効果の例。

ずっと前に書きましたが、今、ブログに載せていますので、皆さんと共有したいと思います。 Baidu や Google 検索のドロップダウン自動プロンプトを模倣する原理は、主に ajax ブリッジを使用するため、それほど複雑ではありません。 Baidu ほど強力ではありません。ピンインなどを一致させることはできません。この効果を実現したいだけです。

ソースコードを見てみましょう。最後に分析とソースコードのダウンロードがあります

データベース、保存してmysqlデータベースにインポートします

コードは次のとおりです

コードをコピー

/* Navicat MySQL データ転送 ソースサーバー: localhost ソースサーバーのバージョン: 50528 ソースホスト: localhost:3306 ソースデータベース: ajaxdemo1 ターゲットサーバーの種類: MYSQL ターゲットサーバーのバージョン: 50528 ファイルエンコーディング: 65001 日付: 2013-07-23 17:52:48 */ FOREIGN_KEY_CHECKS=0 を設定します; ---------------------------- -- `article` のテーブル構造 ---------------------------- `article`; が存在する場合はテーブルを削除します テーブル「記事」を作成 ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(64) NOT NULL, 「クリック」 int(11) NOT NULL, 主キー (`id`)、 一意のキー `タイトル` (`タイトル`) ) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=gbk; ---------------------------- -- 記事の記録 ---------------------------- INSERT INTO `article` VALUES ('1', 'php', '58'); INSERT INTO `article` VALUES ('2', 'pps', '99'); INSERT INTO `article` VALUES ('3', 'pdf リーダー ダウンロード', '32'); INSERT INTO `article` VALUES ('4', 'pptv', '52'); INSERT INTO `article` VALUES ('5', 'photoshop', '58'); INSERT INTO `article` VALUES ('6', 'photoshop cs5 シリアル番号', '26'); INSERT INTO `article` VALUES ('7', 'phpcms', '56'); INSERT INTO `article` VALUES ('8', 'phpnow', '10'); INSERT INTO `article` VALUES ('9', 'php ファイルの開き方', '18'); INSERT INTO `article` VALUES ('10', 'phpdevelopment', '6'); INSERT INTO `article` VALUES ('11', 'php learning', '158'); INSERT INTO `article` VALUES ('12', 'phptutorial', '88');

インデックス.html

代码如下	复制幣
<頭>

getdata.php文件

代码如下

复制幣

header("コンテンツタイプ:text/html;charset=gb2312");  //データ库構成情報(用户名,密码，データ库名，表前缀等)  $cfg_dbhost = "ローカルホスト";  $cfg_dbuser = "ルート";  $cfg_dbpwd = "dddddd";  $cfg_dbname = "ajaxdemo1";  $cfg_dbprefix = ""; $link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd);  mysql_select_db($cfg_dbname);  mysql_query("セット名 gbk");  // 乱コードを防止します  $keywords = iconv("utf-8","gb2312//IGNORE",$_POST['keywords']);  //適合入力の关键字相关的标题，匉点击量排名，点击越多的排最前  $sql = "「.$cfg_dbprefix."article からタイトルを選択します。タイトルは '%".$keywords."%' のようなタイトルです。クリック順に並べ替えます。制限 0,9;";  //エコー $sql;  $res = mysql_query($sql,$link);    $mNums = mysql_num_rows($res);  //エコー $mNums;  $row=mysql_fetch_array($res);  if($mNums   「いいえ」をエコーし​​ます;   exit();  }else if($mNums==1){   //jsonデータを返す   echo "[{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}]";  }その他{   $result="[{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}";   while($row=mysql_fetch_array($res)){    $result.=",{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}";   }   $result.=']';   エコー $result;  }  mysql_free_result($res); ?>

これらはコアコードであり、最後に完全なダウンロードアドレスのサンプルが付いています

まずエフェクトを見てみましょう (ソースコードをダウンロードするには以下にアクセスしてください^_^)

「p」を入力した後の効果

入力された各文字に対してマッチングが実行されます

効果はこんな感じです。大丈夫だと思われる方は、以下のソースコードをダウンロードして遊んでみてください。

データ テーブルには 10 個ほどのデータしか追加していません。必要に応じて、自分で追加できます。

完全なインスタンスのダウンロード アドレス: ソース コードのダウンロード

http://www.bkjia.com/PHPjc/632718.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/632718.html技術記事 Baidu Google を使用すると、単語を入力する限り、関連するプロンプトが表示され、ウェブサイトのエクスペリエンスが大幅に向上しました...

。