使用bootstrap select2进行模糊查询人员选择

最新推荐文章于 2024-08-23 07:50:23 发布

置顶高昂的豆芽

最新推荐文章于 2024-08-23 07:50:23 发布

阅读量1.6k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/lss1351396825/article/details/86636876

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在项目中客户指出，我们选择人员的操作相对复杂，需要改进，同时提议通过模糊查询获取相关人员信息，为满足客户提出的需求，便在网上查找相应处理方案，发现有多个前段框架都可处理问题。

一、jquery autocomplete.js 自动完成插件

demo效果如下：

这种效果选择的文本不是整体，可以手动对该整体进行操作，需要我们另外对该样式进行重构，比较麻烦

API地址：http://jqueryui.com/autocomplete/#multiple

二、jQuery ligerUI.js 插件

demo效果如下：

这个相对功能更加强大一些，但是相对之前jquery autocomplete.js插件存在的问题还是有的

API地址：http://www.ligerui.com/demo.html

三、jquery.tagsinput-revisited.js 标签输入插件

demo效果如下：

这个插件效果基本能满足本项目需求，但网上缺乏相应详细api，作为一个标签输入插件，真正使用起来还是比较麻烦的。

四、bootstrap select2.js下拉插件（本次能够使用的插件）

demo效果如下：

这个插件功能非常强大，依赖bootstrap，只需引入相应js和css即可，上手比较简单，满足ajax动态查询，支持分页，自带模糊查询功能，输入框自动拓展。

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>select2</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- select2 style --> 
    <link rel="stylesheet" href="select2.min.css">
    
  </head>
 
  <body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5;">
    <!-- Main content -->
    <section class="content container" style="margin-top: 15px;">
        <div class="col-sm-4">
            <h3>本地数据方式</h3>
            <select class="form-control input-sm downList1">
                <option></option>
            </select>
            <p class="p1"></p>
            <hr>
            <button type="button" class="btn btn-sm btn-primary" id="one">click</button>
        </div>
        <div class="col-sm-4">
            <h3>AJAX获取数据方式</h3>
            <select class="form-control input-sm downList2">
                <option></option>
            </select>
            <p class="p2"></p>
            <hr>
            <button type="button" class="btn btn-sm btn-primary" id="two">click</button>
        </div>
		</section><!-- /.content -->
		
    <script src="jquery/jQuery-2.1.4.min.js"></script>
    <script src="select2.full.min.js"></script>
    <script src="i18n/zh-CN.js"></script>
  </body>
  <script>
    //one  本地数据方式
    var dataList = [
            { id: 0, text: 'enhancement' }, 
            { id: 1, text: 'bug' }, 
            { id: 2, text: 'duplicate' }, 
            { id: 3, text: 'invalid' }, 
            { id: 4, text: 'wontfix' }
          ];
    $(".downList1").select2({
        data: dataList,
        placeholder:'请选择',//默认文字提示
        language: "zh-CN",
        allowClear: true//允许清空
    })
    $('#one').click(function(){
        var id = $(".downList1").select2("data")[0].id;
        var text = $(".downList1").select2("data")[0].text;
        var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
        $('.p1').text(html);
    })
    //two  AJAX获取数据方式
    $(".downList2").select2({
      ajax: {
        type:'GET',
        url: "url",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term 请求参数
            page: params.page
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;
          /*var itemList = [];
          var arr = data.result.list
          for(item in arr){
              itemList.push({id: item, text: arr[item]})
          }*/
          return {
            results: data.items,//itemList
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },
        cache: true
      },
      placeholder:'请选择',//默认文字提示
      language: "zh-CN",
      tags: true,//允许手动添加
      allowClear: true,//允许清空
      escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
      minimumInputLength: 1,
      formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
      formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
    });
    $('#two').click(function(){
        var id = $(".downList2").select2("data")[0].id;
        var text = $(".downList2").select2("data")[0].text;
        var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
        $('.p2').text(html);
    })
  </script>
  
</html>

demo下载：https://download.csdn.net/download/lss1351396825/10937663