jQuery自动填充插件JQuery Cool Auto-Suggest

所属分类:输入-自动完成

 27730  24  查看评论 (5)
jQuery自动填充插件JQuery Cool Auto-Suggest ie兼容8

JQuery Cool Auto-Suggest自动提示插件。这个新的版本仍然有从旧1相同的功能。其特点是:

        支持ID字段。

        支持图像的缩略图和说明

        支持表单提交的点击。

        此外,新的特点就是回调函数。

        

新增的功能

在这个新版本中,您可以在上一个项目做了一个选择要执行指定的回调函数。然后,包含所选对象的对象参数将被传递给回调函数供以后使用。


如何使用

使用这个插件的基本方式并没有从以前的版本变化。首先,包括jQuery和<head>标记这里面的插件。

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.coolautosuggest.js"></script>

还包括用于造外观样式,这个CSS文件。

<link rel="stylesheet" type="text/css" href="css/jquery.coolautosuggest.css" />

准备文本框。

<input type="text" id="text1" name="text1" />


最后,初始化自动提示文本框。还有在本示例中的一些选项。

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  submitOnSelect:true
});
</script>


如果showThumbnail选项设置为true,它将显示图像的缩略图上的每个建议项目。如果showDescription选项设置为true,它会显示在每一个建议项目的说明文字。如果submitOnSelect选项设置为true时,表单(如果有的话)将被提交,一旦你单击该建议的项目之一。更完整的选项和示例可以在看到演示页面。


使用回调

回调函数是在这个版本的新功能。这就是我们如何使用它。

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  submitOnSelect:true
});
</script>


当你对一个项目做了一个选择,选定的对象将被作为参数传递给回调函数。在这种情况下,作为结果的变量。然后,回调函数将会被执行。该函数的内容是由你。您可以编写自己的函数来处理选定的对象。


服务器端脚本

这是我们使用的服务器端脚本。传输的数据进行编码以JSON格式。这是示例。

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  onSelected:function(result){
    // Check if the result is not null
    if(result!=null){
      $("#text1_id").val(result.id); // Get the ID field
      $("#text1_description").val(result.description); // Get the description
    }
    else{
      $("#text1_id").val(""); // Empty the ID field
      $("#text1_description").val(""); // Empty the description
    }
  }
});
</script>


CSS

你可以通过自定义CSS文件修改样式。下面是CSS文件中的内容

/* Style For Suggestions */
 
/*
 For creating side border like this
 | item 1   |
 | item 2   |
 */
.suggestions .suggest_item{
padding-bottom: 2px;
padding-top: 2px;
background-color:#EEEEEE;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
}
 
/*
 For creating top border like this
 ------------
   item 1
   ...
 */
.suggestions .suggest_item.first{
border-top:1px solid #CCCCCC;
}
 
/*
 For creating bottom border like this
   ...
   item 2
  ------------
 */
.suggestions .suggest_item.last{
border-bottom:1px solid #CCCCCC;
}
 
/*
 For coloring the selected item
 */
.suggestions .suggest_item.selected, .suggestions .suggest_item.selected .description{
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
}
 
/*
 Image thumbnail
 */
.suggestions .suggest_item .thumbnail{
background-color: transparent;
background-position: top center;
background-repeat: no-repeat;
margin: 1px 2px 1px 2px;
float: left;
width: 50px;
height: 50px;
}
 
/*
 Description
 */
.suggestions .suggest_item .description{
font-style: italic;
font-size: 11px;
color: #777;
}
相关插件-自动完成

获取当前光标位置

能够获取表单元素中当前光标的位置.在插入表情等情景下会用到
  自动完成
 7400  31

jquery模糊查询

下拉框可输入的模糊查询,代码简单实用
  自动完成
 9057  17

jQuery代码预览插件runCode.js

可以在线编辑预览前端代码的jQuery插件
  自动完成
 1731  21

原生JS实现购物车结算功能代码

一款界面很舒服的,用户体验很高的购购物才结算插件
  自动完成
 35996  134

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    jjkjkjk 0
    2017/3/17 22:01:19

    那个json是啥格式了,不会用啊

    json数据拿到了不会显示啊 回复
    jjkjkjk 0
    2017/3/17 21:37:31
    json格式怎么搞? 回复
    Barry 0
    2016/12/30 10:12:01
    七七_窝子 0
    2015/11/27 10:11:46
    Cheri_shen 0
    2015/11/13 11:11:44

    为什么一直提示Sorry, an error has occured!

    回复
    WEB小妞 0
    2014/5/19 17:29:00

    很好,简单好用。

    回复
    济公 0
    2014/5/16 11:14:00

    不错,是我要找的。

    回复
    WEB小妞 0
    2014/5/13 21:39:00
    本站应该是wdpress后台没错了. www.demonc.com 回复
取消回复