Integrating with MagicSuggest

This example demonstrates how to integrate FormValidation with . It's a jQuery plugin that shows a multiple selection dropdown which options can be passed from a given data source.

The MagicSuggest plugin attaches a given element, not an input. That's why we need to prepare a hidden field to track which options are chosen:

        
          <
          form
          
          id
          =
          "
          demoForm
          "
          >
          
        
        
          
          
          
        
        
          
          <
          input
          
          type
          =
          "
          hidden
          "
          
          name
          =
          "
          dest
          "
          
          />
          
        
        
          
        
        
          
          
          
        
        
          
          <
          div
          
          id
          =
          "
          destination
          "
          >
          
          div
          >
          
        
        
              ...
        
        
          
          
          form
          >

We can apply a few of validators for the hidden field. Let's say that it can't be empty:

        
          const
           demoForm 
          =
          
          document
          .
          getElementById
          (
          'demoForm'
          )
          ;
          
        
        
          
        
        
          
          const
           fv 
          =
          
          FormValidation
          .
          formValidation
          (
          demoForm
          ,
          
          {
          
        
        
              fields
          :
          
          {
          
        
        
                  dest
          :
          
          {
          
        
        
                      validators
          :
          
          {
          
        
        
                          notEmpty
          :
          
          {
          
        
        
                              message
          :
          
          'Please choose one city'
          
        
        
          
          }
          
        
        
          
          }
          
        
        
          
          }
          ,
          
        
        
          
          }
          ,
          
        
        
              plugins
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
          
          }
          )
          ;

Now, all the preparations are done. It's the time for us to integrate MagicSuggest with the destination element above:

        
          const
           destinationEle 
          =
          
          jQuery
          (
          '#destination'
          )
          .
          magicSuggest
          (
          {
          
        
        
              data
          :
          
          [
          'Amsterdam'
          ,
          
          'Barcelona'
          ,
          
          'Hanoi'
          ,
          
          'London'
          ,
          
          'New York'
          ,
          
          'Paris'
          ,
          
          'Rome'
          ,
          
          'San Francisco'
          ,
          
          'Seoul'
          ,
          
          'Tokyo'
          ]
          ,
          
        
        
              maxSelection
          :
          
          1
          ,
          
        
        
          
          }
          )
          ;

To make the demonstration simple, the data source is just a list of string. In reality, it can be an URL that fetches data from your back-end. Currently there is no connection between the hidden field and our destination dropdown.

What we wish are

Update the value for hidden field after choosing an option
Then revalidate the hidden field

It can be done by triggering the MagicSuggest's selectionchange event and the FormValidation's revalidateField() method . The following piece of code illustrates that approach:

        
          jQuery
          (
          destinationEle
          )
          .
          on
          (
          'selectionchange'
          ,
          
          function
          
          (
          e
          ,
           m
          )
          
          {
          
        
        
          
          // Get the selected item
          
        
        
          
          const
           data 
          =
          
          this
          .
          getSelection
          (
          )
          ;
          
        
        
          
        
        
          
          // Update the value for hidden field
          
        
        
              destField
          .
          value
          
          =
           data
          .
          length
          
          ==
          
          0
          
          ?
          
          ''
          
          :
           data
          [
          0
          ]
          .
          name
          ;
          
        
        
          
        
        
          
          // Revalidate the field
          
        
        
              fv
          .
          revalidateField
          (
          'dest'
          )
          ;
          
        
        
          
          }
          )
          ;

You should look at the basic principle when integrating FormValidation with 3rd party libraries

Integrating with MagicSuggest

The demonstration also uses the technique introduced in the Adjusting icon position example, so the feedback icon is displayed at the desired position

Integrating with MagicSuggest

See also