How to Implement Filtered Search in Drupal 7 using Ajax

At times, in Drupal 7, we need content filtration based on certain conditions. As content listed in bulk creates trouble and confusion in searching. What if we could make our search easy by getting the content filtered? Let’s get into more detail of this problem and see what the possibilities of getting filtered content are.

For example:

I have created a content type "training calender" having multiple fields of type select list in which i wanted

  • Topic and Sub-Topic list field to get refreshed in accordance with Course list field.
  • Assignment list field to get refreshed in accordance with topic list field.

Without this, we get all the topics and subtopics listed in bulk corresponding to a course i.e., no filtration. This results in a tiring search of an assignment.

So, i found that this problem can be resolved using #ajax attribute of list field and can be added on hook_form_alter(). This will improve user interactivity and provide the filtered content.

Here the form id of "node/add/training-calender" is "training_calender_node_form" which need to be altered for required changes.

function formajax_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'training_calender_node_form') {
//Implementing 1 requirement.
//This ajax action is triggered when change to this field occur.
$form['field_course']['und']['#ajax'] = array(
callback' => 'course_topic_ajax_callback',
//It returns the updated form elements (field_topic, field_subtopic) .
'wrapper' => 'replace_sub_topic_select_div',
//Name the wrapper element in which content return from the callback function is to be added.
'event' => 'change',
//Event after which drupal will perform an HTTP request. It can mousedown, blur, change.
'method' => 'replace',
/*Method to be used for placing the new content,it can be 'replaceWith', 'append',
'prepend', 'before', 'after', or 'html' .*/
'effect' => 'slide', //Effect while placing the new content, it can be 'none', 'slide', or 'fade'.
//This add field_topic and field_subtopic into the wrapper (div element).
$form['field_topic']['#prefix'] = 'Drupal_Ajax div id="replace_sub_topic_select_div" >';
$form['field_subtopic']['#suffix'] = 'Drupal_Ajax / div >';
//Implementing 2 requirement.
$form['field_topic']['und']['#ajax'] = array(
'callback' => 'course_assignments_ajax_callback',
'wrapper' => 'replace_assignment_select_div',
'effect' => 'slide',
$form['field_assignment']['#prefix'] = 'Drupal_Ajax div id="replace_assignment_topicselect_div " >';
$form['field_assignment']['#suffix'] = 'Drupal_Ajax / div >';
//Ajax call back Function for Course Field .
function course_topic_ajax_callback($form, $form_state) {
//Add additional content to field_topic, field_subtopic.
return array($form['field_topic'], $form['field_subtopic']);
//Ajax call back Function for Topic Field .
function course_assignment_ajax_callback($form, $form_state) {
//Add additional content to field_topic, field_subtopic.
return array($form['field_assignment']);

To get more tips on Drupal Development, you can read/subscribe to our blog Drupal Development Tricks or our video channels TekritiTv & DrupalTipsByTekriti