<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <link rel="stylesheet" type="text/css" href="app.css"> <script src="app.js"></script> </head> <body onload="load()" style="margin: 0"> <div id="root" style="height: 100vh"></div> <div class="search-box"> <div class="search-content"> <input id="searchStr" type="text" class="searchTerm" placeholder="请输入所要查找的内容"> <button type="submit" class="searchButton" onclick="search()"> 查找 </button> <button id="searchNext" type="submit" class="searchButton searchButtonLast" onclick="next()"> 下一个 </button> </div> </div> </body> </html>
var viewer; var results = [] var currentResult = -1; function load() { viewer = new ActiveReports.Viewer('#root', {language: 'zh'}); viewer.toggleSidebar(); viewer.open("products.rdlx-json"); reset(); } function reset() { results = []; currentResult = -1; viewer.highlight(null); document.getElementById('searchNext').disabled = true; } function search() { reset(); var text = document.getElementById('searchStr').value; viewer.search({ text: text }, function(result) { document.getElementById('searchNext').disabled = false; results.push(result); if(currentResult < 0) next(); }).then(function(status) { console.log(results.length + "occurrences found", status); }); } function next() { if(results.length == 0) { viewer.highlight(null); return; } var i = (currentResult + 1) % results.length; currentResult = i; viewer.highlight(results[i]); }
/*Resize the wrap to see the search bar change!*/ .search-box { width: 30%; position: absolute; top: 90%; left: 5%; z-index: 10000; } .search-content { width: 100%; position: relative; display: flex; flex-direction: row; } .searchTerm { border: 3px solid #00B4CC; border-right: none; padding: 5px; height: 30px; border-radius: 5px 0 0 5px; outline: none; color: #9DBFAF; flex-grow: 1; } .searchTerm:focus { color: #00B4CC; } .searchButton { height: 30px; border: 1px solid #00B4CC; background: #00B4CC; text-align: center; color: #fff; cursor: pointer; font-size: 10pt; } .searchButton:disabled { color: #0084CC; } .searchButtonLast { border-radius: 0 5px 5px 0; }