Use easyUI's combobox to create an automatic prompt component, easyuicombobox

Use easyUI's combobox to create an automatic prompt component, easyuicombobox

Auto-prompt is the next popular feature. For example, Baidu and Google search input boxes all use this feature.

As easyUI's combobox designer has taken this feature into consideration, we can easily create our own automatic prompt component in just a few steps.

There are two automatic prompts: local and remote ).

Local means to load all the data to the client page first, and then only filter the loaded data without sending additional requests to the server.

Remote, that is to say, it does not load all data in advance, but waits for the user to enter a keyword and then sends a request to the server to return the result.

The application scenarios of these two modes are also obvious. The local mode is suitable for scenarios with a small amount of data. Loading all the data is fast and easy to use. You do not need to add a search method in the background;

Remote is suitable for large data volumes. Because the data to be queried is often characteristic, loading all the data is a waste. Therefore, when a keyword is found, the data volume is small to get a faster response time. However, you also need to write a Data Query Method in the background.

The local method is demonstrated in two steps: loading data and filtering data.

Load data:

By setting data or url, we recommend that you use data because no additional request is required.

Filter data:

You need to edit it first. The default editable value of combobox is true, so no additional settings are required.

In addition, combobox provides the filter method to help us filter local data.

$('#cc').combobox({filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) == 0;}});

Q is the output keyword, and row represents a row of data in the local data.

A friend familiar with jQuery should be familiar with it. filter is used to filter out data that meets the test conditions. Here, the test condition is row [opts. textField]. indexOf (q) = 0, that is, to obtain data starting with the keyword q.

In fact, automatic prompts have been implemented in the function. If you think the drop-down arrow in the rightmost selection box of the component is not beautiful, you can remove it by setting hasDownArrow: false.

Here is a configuration of easyUI local Mode for your reference:

$ ('# CC '). combobox ({prompt: 'search automatically after entering the keyword ', required: true, url: 'repairs/geteqiupmentlist', editable: true, hasDownArrow: false });

Now the local method is finished. The remote method is described below. The remote method is a little more complex than the local method. Analyze it first.

In this way, the data is not loaded. All the data is stored in the database. You only need to filter the data to retrieve the data you are interested in.

Since the loaded data is based on the keyword, it must be obtained from the server through the url. Therefore, you must first provide such a method on the server.

I believe this method should be difficult for everyone. You only need to obtain the parameters sent by the client and obtain them to the database for fuzzy query.

It is worth noting that in the remote mode:

1. Each time a form page is opened, a request is always initiated, and the keyWord is empty.

2. When the form is saved and modified again, a request is sent. keyWord is empty like the one in Table 1. In this case, the previously entered data cannot be translated, only values before translation, such as code and id, can be displayed.

To address these two points, let me talk about my solution:

1. combobox provides an onBeforeLoad event extension point, which is triggered before the server requests data. If return is false, the request can be blocked.

In this case, we can determine whether the keyWord is null to control whether the request is initiated. Problem 1 can be solved!

2. We need to find out what is "different" when modifying a form, that is, although keyWord is empty, it actually has a value in combobox. This is different from the request in 1.

We still use onBeforeLoad. When keyWord is empty but the value of combobox is not empty, we send the id to the server to obtain a unique result, this is also an excellent performance.

The following shows the combobox settings and some background code:

$ ('# CC '). combobox ({prompt: 'search automatically after entering the keyword ', required: true, mode: 'remote', url: 'repairs/geteqiupmentlist', editable: true, hasDownArrow: false, onBeforeLoad: function (param) {if (param = null | param. q = null | param. q. replace (// g, '') ='') {var value = $ (this ). combobox ('getvalue'); if (value) {// when you modify the value, q is empty, and value is not empty. id = value; return true;} return false ;}}});

Some background search code:

Public void getEqiupmentList (SearchDTO searchDTO, <span> </span> // here an entity SearchDTO (String q, Integer id) HttpServletResponse response) throws IOException {Integer id = searchDTO. getId (); String keyWord = searchDTO. getQ (); if (id = null & StringUtils. isBlank (keyWord) {return;} if (id! = Null) {// input the idList <Equipment> equipmentList = new ArrayList <Equipment> (1) During modification ); <span> </span> // A jsonArrayEquipment equipment = basecodeService is returned. getEquipmentById (id); equipmentList. add (equipment); sendJson (response, Utils. parseJson (equipmentList); return;} else {List <Equipment> equipmentList = repairsService. getEquipmentListBySearch (searchDTO. getQ (). toString); sendJson (response, Utils. parseJson (equipmentList ));}}

Easyui combobox automatically displays default values

When I return a result in the background, add a row before the list.
{Sid:-1, stockName: ''} or {sid:-1, stockName: '-- select --'}

You need to judge when submitting. If selectValue is-1, you are prompted to select

Another method is in the combobox loadFilter:
$ ('# CC '). combobox ({loadFilter: function (data) {// push a piece of data to the data array {sid:-1, stockName :''}}});

Usage of easyui combobox

I used getJSON url and data to obtain the data.
Var url = "user/getRoles. action ";
$. GetJSON (url, function (json ){
$ ('# Roleop'). combobox ({
Data: json
ValueField: 'rolid ',
TextField: 'rolname'
});
});