jQuery – Synchronize Text Input

In Drupal Development, very often we will use Views and Views Filter for searching data. For example, I have a content type which has two name fields.

  1. English Name – field_english_name
  2. Chinese Name – field_chinese_name

 

I would like to have a single text input filter which could search for these 2 fields with an Or condition.

1. Expose these2 filters in view and connecting the using the Or filter group.

2. On the front end, hide the 2nd filter text input, say, Chinese Name using CSS.

.view-filters #edit-field-english-name-value-wrapper {
  display: none;
}

 

3. Use the following piece of jQuery code such that whenever the 1st filter text input(English Name) is entered with text, it will be copied to the 2nd filter text input(Chinese Name).

(function ($) {
  $(document).ready(function() {
  // Sync chi and eng name in contestant-result page
  $('#edit-field-contestant-name-value').change(function() {
    var input = $('#edit-field-contestant-name-value').val();
    $('#edit-field-english-name-value').attr('value', input);
  });
})(jQuery);

 

You could find other approaches about syncing two text input in the following link.
StackOverflow – Detect all changes to a <input type=”text”> (immediately) using JQuery

Done =)

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.