发新话题
打印

Suggest Framework,仿Google Suggest的框架

Suggest Framework,仿Google Suggest的框架

Google推出了大量的AJAX Cool效果,其中Google Suggest的输入即所得被国人津津乐道,并在N多门户站大肆仿制,很多新手喜欢这个效果,但被繁重的编码吓的不敢深入,今天,在网上闲逛的时候发现了一个框架,能让你简单修改几个参数就能达到很Cool的效果

下边是我做的一个简单演示单词库,效果如下:

在输入框里输入'a',马上出现了与'a' 有关的单词

附件

1.jpg (28.45 KB)

2006-8-30 10:46

1.jpg

女人!

TOP

在这个php示例中,每当文本框的内容改变时,都将触发一个事件,即用异步方式读取数据库,返回数组,显示结果。


<?php
// For example,

$conn=mysql_connect ("localhost", "MYSQL用户名", "密码");
mysql_select_db("表");


// Suggest Framework passes two variables:
//
// $type - the name of the input tag
// $q    - the search string

if($_GET["type"] && $_GET["q"])
{


            // This is an example of a three column response being sent back, with a header
            $query = "SELECT word, " .
                     "       chinese " .
                     
                     "FROM   d " .
                     "WHERE  word LIKE '" . $_GET["q"] . "%' " .
                     "LIMIT  10";
            $results = mysql_query($query);
            if(mysql_num_rows($results))
            {
                // Header
                $values[] = 'new Array("[词条]", "[中文含义]")';
                while($result = mysql_fetch_object($results))
                    $values[] = 'new Array("' . $result->word . '", "' . $result->chinese . '")';
                print "new Array(" . implode(", ", $values) . ");";
            }
   
}
?>




上面的代码是,连接一个MYSQL数据库,然后在一个表的中读取数据。而你在html页面中只要稍稍做一下处理,看下面前台代码的文本框参数。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Suggest Framework example</title>
<style type="text/css">@import url("SuggestFramework.css");</style>
<style type="text/css">input { width: 400px; border: 1px solid #CCCCCC; }</style>
<script type="text/javascript" src="SuggestFramework.js"></script>
<script type="text/javascript">window.onload = initializeSuggestFramework;</script>

</head>
<body>
<input id="example2" name="example2" type="text" heading="true" action="backend.php" columns="2"  />

</body>
</html>


[ 本帖最后由 卢巧音中文网 于 2006-8-30 10:57 编辑 ]
女人!

TOP

源文件!

附件

SuggestFramework.rar (3.61 KB)

2006-8-30 10:59, 下载次数: 374

我这个例子的源代码

SuggestFramework-0.31.zip (21.17 KB)

2006-8-30 10:59, 下载次数: 310

这个是原始的框架,有php和cfm例子

女人!

TOP

学习中  先顶后下。。
IT民工

TOP

哈哈,google主推GWT-"Google Web Toolkit",一个简化javascript开发的开发框架.基与java.
http://code.google.com/webtoolkit/

TOP

google的ajax产品基本上都是基与这个框架下开发的

TOP

不错,回去研究一下先
女人!

TOP

发新话题