How to implement autosuggest feature for a!paragraphField

No, You cannot create that feature within a!paragraphField(). What is the expected character length of each suggestion and the number of suggestions?

Hi Konduru,

We have implement the autosuggest using the a!pickerFieldCustom, but the there is no height option to increase the size of the text box , business wants the size of the text box to be same as paragraphField

bihitakd0002 said:

business wants the size of the text box to be same as paragraphField

This is not supported.  Usually around this time it's necessary to do some expectations-setting with the business owners to ensure they understand the distinction between "requirements" and "design".

However it depends on your use case too.  If the desire is to search among some data based on the text entered into a paragraph field, then some clever redesign could potentially accomplish this - what if you display the results of a live filtering in a one-or-two-column read-only grid just under the paragraph box, and update the results as the user types?

As Mike mentioned you need to reconsider this option or need to come up with some designs which would give similar feel and fulfill the requirement.

I have tried using a textField which collects the info to filter the data using includes as the operator and a cardLayout with richtext in it in a loop which runs over the given input. 



But again performance depends on the amount of data you have.

can you please share the example code for the above.

can you please share the example code for the above.

Sure here!

a!localVariables(
  local!variable: null,
  local!data: a!refreshVariable(
    value: a!queryRecordType(
      recordType:"your RecordType here",
      fields: {
        "Fields you will need"
      },
      filters: a!queryLogicalExpression(
        operator: "AND",
        filters: {
          a!queryFilter(
            field: "Your labels/Values",
            operator: "includes",
            value: local!variable
          )
        },
        ignoreFiltersWithEmptyValues: true
      ),
      pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 100)
    ).data,
    refreshAlways:true
  ),
  local!selection,
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          width: "MEDIUM",
          contents: a!sectionLayout(
            label: "On Selection",
            contents: {
              a!textField(
                label: "Search Text",
                labelPosition: "ABOVE",
                value: local!variable,
                saveInto: {
                  local!variable,
                  a!save(local!selection, null)
                },
                refreshAfter: "KEYPRESS",
                validations: {}
              ),
              a!forEach(
                items: local!data,
                expression: {
                  a!cardLayout(
                    showWhen: a!isNotNullOrEmpty(local!variable),
                    link: a!dynamicLink(
                      saveInto: a!save(local!selection, fv!item)
                    ),
                    style:if(
                      a!isNotNullOrEmpty(local!selection),
                      if(fv!item = local!selection, "ACCENT", ""),
                      {}
                    ),
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextItem(
                            text: fv!item["use your value index by record"]
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        )
      }
    )
    
    
    
  }
)