select2 的分页搜索加载的简单实例

最新推荐文章于 2022-09-02 17:08:02 发布

WMSmile

最新推荐文章于 2022-09-02 17:08:02 发布

阅读量686

点赞数

分类专栏： H5 文章标签： Select2 分页搜索

本文链接：https://blog.csdn.net/wm9028/article/details/117445001

版权

H5 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

select2 的分页搜索加载的简单实例


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Select2 分页加载</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet">

    
    
</head>
<style>
	/*.input-text{
		width:85%;
		height:200px ;
		line-height:200px ;
		margin: 0; 
		padding: 0;
		padding-left:5px;
		border-width:1px;
	}*/
    
    /*change dropdowm offset*/
	/*.select2-dropdown {
	    margin-left: 8px !important;
	    margin-top: 20px !important;
	}*/

    /*change box width height*/
    .select2-results__options {
       max-height: 600px;
    }
    /*change click selection height*/
    .select2-selection__rendered {
        line-height: 50px !important;
    }
    .select2-container .select2-selection--single {
        height: 50px !important;
    }
    .select2-selection__arrow {
        height: 50px !important;
    }

   /* .select2-choices {
      min-height: 300px;
      max-height: 300px;
      overflow-y: auto;
    }*/
    /*change search inpu height*/
    .select2-search input {
      height: 50px !important;
    }



</style>
<body>
	<div style="width: 85%;">
		<h1>Select2 分页加载</h1>
	    <div class="s1-example">
	       	<select id="selectDemo" style="width:100%;height: 50px;" class="select2-dropdown" name="selectDemo" ></select>
	    </div>
    
	</div>
   

    <script type="text/javascript">
  	$(document).ready(function() {
        var data_count = 10;
    	$("#selectDemo").select2({
    		ajax: {
     		url: "https://api.apiopen.top/getWangYiNews",
    	    dataType: 'json',
    	    delay: 250,
    	    data: function (params) {
    	        var query = {
    	    		search: params.term,
    	            page: params.page || 1,
    	            count: data_count
    	        }
    	   		return query;
    	    },
    	    processResults: function (data,params) {
    	    params.page = params.page || 1;
            console.log(data);
    		var array = data.result;
    		var i = 0;
    	    while(i < array.length){
    	        array[i]["id"] = array[i]['title'];
    	        array[i]["text"] = array[i]['title'];
    	        delete array[i]["title"];
    	        // delete array[i]["label"];
    	  		i++;
    	    }
            console.log(data_count,data.result.length);
   	         return {
   	             results: array,
	   	         pagination : {
                        //判断数据是否加载完成
	                  more : data_count <= data.result.length
	             }
   	         };


    	    },
    	    cache: true
    	  },
    	  placeholder: '请输入关键字',
    	  escapeMarkup: function (markup) {return markup; },
          //最小的搜索字数
    	  minimumInputLength: 0,
		  // templateResult : formatPromCode,
    	  formatSelection: formatSelect
    	})



    // 自适应
    remChange();
    window.addEventListener('resize', remChange);
    function remChange() {
        remove();
        let width = window.screen.width;
        let fixedw = 750;
        let scale = width / fixedw; //获取到的屏幕宽度比上自定义的750宽度 获得对应比例
        let meta = document.createElement("meta");
        meta.setAttribute('name', 'viewport');
        //将对应比例填入meta标签即可实现宽度自适应
        meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);
        //meta将标签添加到文档中即可
        document.head.appendChild(meta);
    }
    function remove() {
        let meta = document.querySelector("meta[name='viewport']");
        if (meta != null) {
            document.head.removeChild(meta);
        }
    }





















    });

    function format(results){	
    	if (results.loading) {
    		return results.text;
    	}
    	if(results.id){
    		return '<option value="'+ results.id +'">' + results.text + '</option>';
    	}	
    }
    function formatSelect(results){
    	  return results.id || results.text;
    }

    












   
    </script>
</body>
 
</html>

WMSmile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
select2 的分页搜索加载的简单实例

select2 的分页搜索加载的简单实例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Select2 分页加载</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script> &lt
复制链接

扫一扫