[个人原创]jquery-autocomplete 结合PHP后台查询的简单使用 ,下拉提示插件，模仿Google那个。

Wed, 07 Sep 2011 08:31:15 +0000

直接下载后，放到Apache htdoc下就能用的示例下载，在框中输入j即可看到效果：
点击这里下载文件

其插件会向后台发送Ajax，Ajax请求：
http://localhost/jquery_php_autocomplete/getindex.php?q=j
返回：
jack
jackson
jackxiang
前台通过Js对这串数据做逻辑和展现，这样一种思路。

自己简单实践了一把，里面有很多可调参数。你也可以通过Js的Ajax去调用那个DB把查询到的结果给前端：

前端素材：
1.Jquery原始Core文件
2.Jquery插件包含一Js和一个Css文件：
1）jquery.autocomplete.js
2）jquery.autocomplete.css
3.蹂躏在一起写到一个Html中，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title> autocomplete Study Demo</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery插件之AutoComplete使用实例</title>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
    <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')    
    </script>  
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <script type="text/javascript">
    var websites = [
        "Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent", 
        "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
    ];
    $().ready(function() {
        $("#website").autocomplete(websites);  
    });
    </script>
</head>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
</p>
<div id="content"></div>
</body>

有一个原生的Demo，在该插件的网站上，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
  });
  </script>
  
</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

参考：http://docs.jquery.com/Plugins/Autocomplete#Demos

jquery自动完成插件(autocomplete)应用之PHP版下载：
点击这里下载文件
详细出处参考：http://www.jb51.net/article/21417.htm

[评论] [个人原创]jquery-autocomplete 结合PHP后台查询的简单使用 ,下拉提示插件，模仿Google那个。

Thu, 01 Jan 1970 00:00:00 +0000

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除

[个人原创]jquery-autocomplete 结合PHP后台查询的简单使用 ,下拉提示插件，模仿Google那个。

[评论] [个人原创]jquery-autocomplete 结合PHP后台查询的简单使用 ,下拉提示插件，模仿Google那个。

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除