JS for the drop-down box data volume solution

1) Problem description

When using the drop-down box, if there is a large amount of data in the drop-down box, for example, there are tens of thousands of options, the fuzzy search function still cannot load all items in the drop-down box, how to solve the problem that the drop-down box can display all items in the large amount of data?

2) Implementation roadmap

In the master template using a drop-down box, click a button, the reference a JS, make it pop up a dialog, the dialog item embedded drop-down template (due to the amount of data in the template is not restricted), fuzzy search in this template, all item drop-down lists all of the options, click the query data needs to be returned to the main text box on the template. The effect is shown below:

1) Report design

Create a new dataset ds1: SELECT * FROM STSCORE, drag all fields to A2-F2, and design the template as follows, as shown in the picture below:

2) Setting template parameter

Create a template parameter named p1, edit the parameter panel, select Add All, add a button type widget, name the button select record, click Add event, write the following JS statement, as shown in the picture below:

The JS code is as follows:

var url = encodeURI(encodeURI("${servletURL}?viewlet=doc-EN/Parameter/JS_for_the_drop - down_box_data_volume_solution.cpt.cpt"));
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", url);
var o = {
        title: "Please select a record",
        width: 700,
        height: 400
};
FR.showDialog(o.title, o.width, o.height, $iframe, o);

3) Setting filter criteria

Double-click A2 cell and add filter condition, NAME field is filtered with $p1, as shown below:

4) Saving a template

Click Save and name the template JS_for_the_drop - down_box_data_volume_solution(main).cpt

1) Report design

Create a general report, create a new dataset ds1:SELECT * FROM STSCORE where name like '%${if(len(id)=0,"error",id)}%' .Drag the NAME field to cell A1,as shown below:

2) Setting parameters

Edit the parameter panel and select Add all. The widget value is Fuzzy query field: and the widget type is text widget, as shown below:

3) Setting text widgets

Select A1 cell, set widget as text widget, widget name as record, select hyperlink, add JS script, add parameter val, select insert formula $$$, as shown below:

The JS code is as follows:

parent._g().parameterEl.getWidgetByName("p1").setValue(val);
window.parent.FR.closeDialog();
window.parent.FR.destroyDialog();

4) Setting filter criteria

Double-click A1 cell, select filter, optional column NAME, operator is Contain, select parameter $id, as shown below:

5) Saving a template

Click Save and name the template JS_for_the_drop - down_box_data_volume_solution.cpt

1) PC

Select Pagination Preview from the main template, as shown in Section I of this article.

2) Mobile

Mobile terminal is not supported.

1) Main template

For the completed template, see: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\JS_for_the_drop - down_box_data_volume_solution(main).cpt

Click to download the template:

JS_for_the_drop - down_box_data_volume_solution(main).cpt

2) Sub-template

For completed templates, see: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\JS_for_the_drop - down_box_data_volume_solution.cpt

Click to download the template: 

JS_for_the_drop - down_box_data_volume_solution.cpt