免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2086 | 回复: 1

JQuery autocomplete 结合ajax完美应用 [复制链接]

论坛徽章:
0
发表于 2012-02-24 20:54 |显示全部楼层
JQuery autocomplete 结合ajax完美应用
  1. index.html

  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>

  5. <title>jQuery Autocomplete Plugin</title>
  6. <script type="text/javascript" src="../jquery_autocomplete/lib/jquery.js"></script>
  7. <script type='text/javascript' src='../jquery_autocomplete/lib/jquery.bgiframe.min.js'></script>
  8. <script type='text/javascript' src='../jquery_autocomplete/lib/jquery.ajaxQueue.js'></script>
  9. <script type='text/javascript' src='../jquery_autocomplete/jquery.autocomplete.js'></script>
  10. <script type='text/javascript' src='../jquery_autocomplete/lib/thickbox-compressed.js'></script>

  11. <link rel="stylesheet" type="text/css" href="../jquery_autocomplete/jquery.autocomplete.css" />

  12.    
  13. <script type="text/javascript">
  14. $().ready(function() {

  15.    
  16.     $("#suggest1").autocomplete("ajax.php", {
  17.         minChars: 0,
  18.         width: 230,
  19.         highlight: false,
  20.         scrollHeight: 300,
  21.         matchContains: "word",   
  22.         autoFill: false,   
  23.         parse: function(data) {
  24.             return $.map(eval(data), function(row) {
  25.                 return {
  26.                     data: row,
  27.                     value: row.name,
  28.                     result: row.to
  29.                 }
  30.             }); //对ajax页面传过来的数据进行json转码
  31.         },
  32.         formatItem: function(row, i, max) {
  33.           return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
  34.           },
  35.         formatMatch: function(row, i, max) {
  36.          return row.name + row.to;
  37.         },
  38.          formatResult: function(row) {
  39.           return row.to;
  40.         }
  41.     }).result(function(event, row, formatted) {
  42.                     return row.to;
  43.              });
  44.    

  45. });


  46. </script>
  47.    
  48. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  49. </head>

  50. <body>

  51. <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> local deomo</h1>

  52. <div id="content">
  53.    
  54.     <form>
  55.         <p>
  56.             <label>选择客户:</label>
  57.             <input type="text" id="suggest1" size="30px"/>
  58.             
  59.         </p>
  60.         
  61.     </form>
  62. </div>

  63. </body>
  64. </html>

  65. index结束



  66. ajax.php



  67. <?php

  68. $conn = @mysql_connect("localhost","root","") or die("Failed!");
  69. mysql_select_db("jquery_test",$conn);
  70. mysql_query("set names 'utf8'");

  71. $q = $_GET["q"];
  72. if (!$q) return;

  73. $items = array();
  74. $sql1 = mysql_query("select `CLIENT_N_SHORT`,`CLIENT_NAME` from `client`");
  75. while($row = mysql_fetch_array($sql1)){
  76.     $key = $row['CLIENT_N_SHORT'];
  77.     $value = $row['CLIENT_NAME'];
  78.    
  79.     if (strpos($value, $q) !== false) {
  80.         array_push($items, array(
  81.             "name" => urlencode($key),
  82.             "to" => urlencode($value)
  83.         ));

  84. //防止json中文乱码 因此转码
  85.    
  86.     }
  87. }
  88. //print_r($items);
  89. //exit();
  90. //echo "<hr>";

  91. echo urldecode( json_encode($items) );
  92. ?>
复制代码
有什么不懂的可以追问

原创精品,转载请说明出处http://www.cnblogs.com/jia58960/archive/2012/02/22/2362875.html

论坛徽章:
0
发表于 2012-02-24 20:54 |显示全部楼层
谢谢分享
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP