开始使用 文档 演示/教程 独立组件 社区
全部分类 实体操作 脚本控件

智能下拉框

  用于前端可通过关键字从数据库匹配需要的数据,绑定下拉表,实现智能下拉框的功能。绑定点击事件可实现选中数据后执行的操作。

IntelligentPerceive()
     html代码

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="/_css/Intelligent.css" />

    <link href="/_css/manage.css" rel="stylesheet" type="text/css" />

    <script src="/_js/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="/_js/Valid.js" type="text/javascript"></script>

    <script src="/_js/common.js" type="text/javascript"></script>

    <script src="/_JS/Intelligent.js" type="text/javascript"></script>

    <script src="download.js" type="text/javascript"></script>

</head>

<body>

<div class="div_search">

    <em class="em_input"><input class="txt serach_user" type="text"

   maxlength="20" _id='0' /><i></i></em>

</div>

</body>

bindRow()

行绑定事件

示例:

var serach_user = $('.serach_user');
new DropdownItem({ dropdown: serach_user.next(),
   input: serach_user,
   tag: $('body'),
   default_value: '请输入内容’,
   class_name: 'search_size',
   url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
   bindRow: function (data) {
      return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
   }
});

展示效果:

clickRow()

行单击事件

示例:

var serach_user = $('.serach_user');
new DropdownItem({ dropdown: serach_user.next(),
   input: serach_user,
   tag: $('body'),
   default_value: '请输入内容’,
   class_name: 'search_size',
   url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
   bindRow: function (data) {
      return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
   }, clickRow: function (row)
   {
      alert("选择行事件");
   } });

展示效果:

keyup_Callback(input)

键盘输入回调事件

示例:

var serach_user = $('.serach_user');
new DropdownItem({ dropdown: serach_user.next(),
   input: serach_user,
      tag: $('body'),
      default_value: '请输入内容’,
      class_name: 'search_size',
      url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
      bindRow: function (data) {
         return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
      }, keyup_Callback: function (input)
      {
         alert("键盘输入事件");
      } });

展示效果:

rowHover(index)

移入行事件

示例:

var serach_user = $('.serach_user');
   new DropdownItem({ dropdown: serach_user.next(),
   input: serach_user,
   tag: $('body'),
   default_value: '请输入内容’,
   class_name: 'search_size',
   url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
   bindRow: function (data) {
      return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
   }, rowHover: function (index)
   {
      alert("移入行事件");
   } });

展示效果:

closed_Callback()

关闭后回调事件

示例:

var serach_user = $('.serach_user');
new DropdownItem({ dropdown: serach_user.next(),
   input: serach_user,
   tag: $('body'),
   default_value: '请输入内容’,
   class_name: 'search_size',
   url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
   bindRow: function (data) {
      return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
   }, closed_Callback: function ()
   {
      alert("关闭后回调事件");
   } });

展示效果:

开始使用| 文档| 演示/教程| 独立组件| 社区 快递查询 Copyright © 2016 - 2017 tiaoceng.com All Rights Reserved