Custom page drop-down select real-time search form data (anti-shake application instance)

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. Usage scenarios

This example describes how to use anti-shake to select real-time search form data in the YIDA custom page.

Document Source:Anti-shake Debounce

2. Principle

Execute the callback function n seconds after the event is triggered. If the event is re-triggered within n seconds, the time is re-timed. The result is that frequently triggered events are merged once and executed at the end.

For example:

The elevator will close and start to operate after 5 seconds. If someone comes in, wait for 5 seconds, someone will come in within 5 seconds, and wait for 5 seconds to re-time... until more than 5 seconds, the elevator will not start to operate.

3. Implement functions

3.1. Configure drop-down select data base table

Select the association option from the drop-down list of the custom page.

3.2. Custom page configuration

3.2.1. Page configuration

3.2.2. Configure a data source to obtain form data

Request address:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

3.2.3. Configure variables

名称：selectDataSource
描述：下拉选择选项
数据：[]

名称：debounceTimer
描述：
数据：null

3.3. Page function configuration

3.3.1. Configure the Get drop-down selection option function

Note modify the form formUuid and field unique identifier as needed.

/**
* 获取下拉选择选项
* @param searchKey: {String} 实时查询参数
* @param uniqValue: {Boolean} 选项是否去重
*/
export function getSelectDataSource(searchKey = '', uniqValue = true) {
  this.dataSourceMap.getData.load({
    formUuid: 'FORM-6F889E5B2C79445880289736CFEFAA80QV8I',
    pageSize: 100,
    searchFieldJson: JSON.stringify({
      textField_lahnv890: searchKey,
    }),
  }).then((res) => {
    const { data = [] } = res;
    const selectDataSource = data.map((item) => {
      const { formData = {} } = item;
      return {
        text: formData.textField_lahnv890,
        value: formData.textField_lahnv890,
      };
    });
    this.setState({
      selectDataSource: uniqValue ? _.uniqBy(selectDataSource, 'value') : selectDataSource,
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
  });
}

3.3.2. Select OnSearch search action from the configuration drop-down list.

Bind the following functions:

/**
* selectField onSearch
* @param value: {String} 数据
*/
export function onSearch(keyword) {
  if (this.state.debounceTimer) {
    clearTimeout(this.state.debounceTimer);
  };
  // 注意防抖，防抖案例：https://www.aliwork.com/o/coc?tplUuid=TPL_EV117QZ9KD6EK0334JNU&from=yuque_subject
  const debounceTimer = setTimeout(() => {
    this.getSelectDataSource(keyword);
    this.setState({
      debounceTimer: null,
    });
  }, 300);
  this.setState({
    debounceTimer,
  });
}

3.3.3. Drop-down select binding options

4. Effect

5. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_ZQNUZNB9IGHKHCDZKX2Y&from=yuque_subject