jQuery插件James实现javascript自动完成提示功能

实现javascript自动完成提示功能，这个介绍一个jQuery插件James，James是JSON Autocomplete Made Extremely Simple的简称，意思是非常简单的JSON自动完成，在input文本框中输入文字实现javascript自动提交并获取结果返回，James效果图如下：

jquery_james_demo
使用说明
一，使用jQuery库文件和james库文件
二，定义javascript自动完成显示效果CSS样式

使用实例
一，包含文件部分

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.james.js" type="text/javascript"></script>
  3. <link type="text/css" rel="stylesheet" href="james.css" />

二，HTML部分

  1. <p>jQuery插件James测试实例</p>
  2. <p>自动完成:<input type="text" class="biuuu" /></p>

三，javascript部分

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $(".biuuu").james("biuuu.php", {});
  4. });
  5. </script>

四，biuuu.php处理文件

  1. <?php
  2. $result = array ();
  3. $result[] = "biuuu test begin";
  4. $result[] = "GET: ".(isset($_GET['input_content']) ? $_GET['input_content'] : "None");
  5. $result[] = "POST: ".(isset($_POST['input_content']) ? $_POST['input_content'] : "None");
  6. $result[] = "biuuu test end";
  7. echo json_encode ( $result );
  8. ?>

James配置清单
1，keydelay表示按扭延迟时间，默认为300
2，minlength表示输入文本长度最小值，默认为3
3，method表示提交方法，默认为get，可选get和post
4，varname表示提交变量名，默认为input_content，用于处理文件获取变量，如上：$_GET['input_content']
5，params表示参数，默认为空

具体配置的几个实例
一，James实现javascript自动完成设置延迟效果
$(".input").james("biuuu.php", { keydelay: 0});

二，James实现javascript自动完成设置输入文本长度最小值
$(".input").james("biuuu.php", { minlength: 5});

三，James实现javascript自动完成设置提交方法
$(".input").james("biuuu.php", { method: "post"});

四，James实现javascript自动完成设置参数
$(".input").james("biuuu.php", { params: "name=value&foo=bar"});

以上几个实例可知，使用jQuery插件James实现javascript自动完成提示功能非常简单，基本上一行JS代码可以搞定，在使用中要注意字符UTF8转换，使用中根椐实际情况进行调整。jQuery插件James自动完成工具值得推荐。

点我查看jQuery插件James实现javascript自动完成提示功能 演示