hulinfei
/
power-prediction-project-2.0


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
							<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('搜索自动补全')" />
</head>
<body class="gray-bg">
      <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
                    </div>  
                    <div class="ibox-content">
                        <p>展示下拉菜单按钮。</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="suggest-demo-1">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <p>不展示下拉菜单按钮。</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="suggest-demo-2">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <p>前端json中获取数据</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="suggest-demo-3">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                            </div>
                        </div>
                        
                        <h3>百度搜索</h3>
                        <p>支持逗号分隔多关键字</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group" style="width: 300px;">
                                    <input type="text" class="form-control" id="baidu">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                            </div>
                        </div>
                        
                        <h3>淘宝搜索</h3>
                        <p>支持逗号分隔多关键字</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group" style="width: 400px;">
                                    <input type="text" class="form-control" id="taobao">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <label class="font-noraml">相关参数详细信息</label>
                            <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
                    </div>  
                    <div class="ibox-content">
                        <p>通过数据属性的基本示例。</p>
                        <div class="row">
                            <div class="col-lg-6">
                           	    <input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
                            </div>
                        </div>
                        <hr>
                        
                        <p>通过javascript的基本示例。</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
                            </div>
                        </div>
                        
                        <hr>
                        <p>通过javascript的复杂示例。</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
                            </div>
                        </div>
                        
                        <hr>
                        <p>后台url中获取简单数据</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
                            </div>
                        </div>
                        
                        <hr>
                        <div class="form-group">
                            <label class="font-noraml">相关参数详细信息</label>
                            <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <th:block th:include="include :: bootstrap-typeahead-js" />
    <script type="text/javascript">
        
	    var testBsSuggest = $("#suggest-demo-1").bsSuggest({
	        url: ctx + "demo/form/userModel",
	        idField: "userId",
	        keyField: "userName"
	    }).on('onDataRequestSuccess', function (e, result) {
	        console.log('onDataRequestSuccess: ', result);
	    }).on('onSetSelectValue', function (e, keyword) {
	        console.log('onSetSelectValue: ', keyword);
	    }).on('onUnsetSelectValue', function (e) {
	        console.log("onUnsetSelectValue");
	    });
	    
	    var testBsSuggest = $("#suggest-demo-2").bsSuggest({
	        url: ctx + "demo/form/userModel",
	        showBtn: false,
	        idField: "userId",
	        keyField: "userName"
	    }).on('onDataRequestSuccess', function (e, result) {
	        console.log('onDataRequestSuccess: ', result);
	    }).on('onSetSelectValue', function (e, keyword) {
	        console.log('onSetSelectValue: ', keyword);
	    }).on('onUnsetSelectValue', function (e) {
	        console.log("onUnsetSelectValue");
	    });
	
	    //data 数据中获取
	    var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
	        indexId: 1,
	        indexKey: 2,
	        data: {
	            'value': [
	                {
	                    'userId': '1',
	                    'userCode': '1000001',
	                    'userName': '测试1',
	                    'userPhone': '15888888888'
	                },
	                {
	                    'userId': '2',
	                    'userCode': '1000002',
	                    'userName': '测试2',
	                    'userPhone': '15888888888'
	                },
	                {
	                    'userId': '3',
	                    'userCode': '1000003',
	                    'userName': '测试3',
	                    'userPhone': '15888888888'
	                },
	                {
	                    'userId': '4',
	                    'userCode': '1000004',
	                    'userName': '测试4',
	                    'userPhone': '15888888888'
	                },
	                {
	                    'userId': '5',
	                    'userCode': '1000005',
	                    'userName': '测试5',
	                    'userPhone': '15888888888'
	                }
				],
	            'defaults': 'http://ruoyi.vip'
	        }
	    });
	    
	    //百度搜索测试
	    var baiduBsSuggest = $("#baidu").bsSuggest({
	        allowNoKeyword: false, //是否允许无关键字时请求数据
	        multiWord: true, //以分隔符号分割的多关键字支持
	        separator: ",", //多关键字支持时的分隔符，默认为空格
	        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
	        url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
	        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
	        jsonp: 'cb',
	        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
	        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
	            var i, len, data = {
	                value: []
	            };
	            if (!json || !json.s || json.s.length === 0) {
	                return false;
	            }
	
	            console.log(json);
	            len = json.s.length;
	
	            jsonStr = "{'value':[";
	            for (i = 0; i < len; i++) {
	                data.value.push({
	                    word: json.s[i]
	                });
	            }
	            data.defaults = 'baidu';
	
	            //字符串转化为 js 对象
	            return data;
	        }
	    });
	    
	    //淘宝搜索建议测试
	    var taobaoBsSuggest = $("#taobao").bsSuggest({
	        indexId: 2,                 // data.value 的第几个数据，作为input输入框的内容
	        indexKey: 1,                // data.value 的第几个数据，作为input输入框的内容
	        allowNoKeyword: false,      // 是否允许无关键字时请求数据
	        hideOnSelect: true,         // 鼠标从列表单击选择了值时，是否隐藏选择列表
	        multiWord: true,            // 以分隔符号分割的多关键字支持
	        separator: ",",             // 多关键字支持时的分隔符，默认为空格
	        getDataMethod: "url",       // 获取数据的方式，总是从 URL 获取
	        effectiveFieldsAlias: {
	            Id: "序号",
	            Keyword: "关键字",
	            Count: "数量"
	        },
	        showHeader: true,
	        url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
	        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
	        jsonp: 'callback',
	        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
	        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
	            var i, len, data = {
	                value: []
	            };
	
	            if (!json || !json.result || json.result.length == 0) {
	                return false;
	            }
	
	            console.log(json);
	            len = json.result.length;
	
	            for (i = 0; i < len; i++) {
	                data.value.push({
	                    "Id": (i + 1),
	                    "Keyword": json.result[i][0],
	                    "Count": json.result[i][1]
	                });
	            }
	            console.log(data);
	            return data;
	        }
	    });
	    
	    $('#typeahead-demo-1').typeahead({
            source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
        });
	    
	    $('#typeahead-demo-2').typeahead({
            source: [
                {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
                {"name": "Land Islands", "code": "AX", "ccn0": "050"},
                {"name": "Albania", "code": "AL","ccn0": "060"},
                {"name": "Algeria", "code": "DZ","ccn0": "070"}
            ]
        });
	    
	    $.get(ctx + "demo/form/collection", function(data){
	    	$("#typeahead-demo-3").typeahead({
		        source: data.value
		    });
        },'json');
    </script>
</body>
</html>