Drupal 7 : How to use HTML5 datalists for autocomplete

 I show you how to use HTML 5 datalist in drupal 7 form step by step

Step 1

           Create a custom module , in .module file use Hook form alter, in my case module name is "custom_code". So My custom_code.module file are below.

function custom_code_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'inventory_node_form') {

                  global $user;
		  $curtuid = $user->uid;
                

               $quer = db_select('node', 'ne');
		$quer->fields('ne', array('nid'));
		$quer->condition('ne.uid', $curtuid);
		$quer->condition('ne.status', 1);
		$quer_re = $quer->execute();
		foreach ($quer_re as $value_res) {

		$data2[] = $value_res->nid;
		}

                if(!empty($data2)) {
		$quer1 = db_select('field_data_field_room', 'nr');
		$quer1->fields('nr', array('field_room_value'));
		$quer1->condition('nr.entity_id', $data2, 'IN');
		$quer12 = $quer1->execute();
		foreach ($quer12 as $value_res1) {

		$data21[] = $value_res1->field_room_value;
		}

                $form['room_val_hid'] = array(
		'#type' => 'hidden',
		'#attributes' => array(
		                       'id' => 'roomhiddenval',
		                      ),
		'#value' => $data21,
		 );
  }
} 




Add Hidden form field with hook form alter and assign  autocomplete value to hidden form.

after this we create a .js file 

Step 2

jQuery('#inventory-node-form #edit-field-room-und-0-value').attr("list","hidennroomid");
jQuery('#inventory-node-form #edit-field-room-und-0-value').after('<datalist id="hidennroomid"></datalist>');
	 var hinndenroomval = jQuery("#roomhiddenval").val();
	 var res = hinndenroomval.split(" ");
	 var length = res.length;
	 //console.log(res);
	 //console.log(length);
	 for (i = 0; i <=length-1; i++) {
		 
		 jQuery("#hidennroomid").append("<option value='" + 
                res[i]+ "'></option>");
		 
		// console.log([res[i]]);
	 }

with Javascript first assign list attribute to field , in my case field id is "inventory-node-form #edit-field-room-und-0-value". the add datalist after filed.

Kindly see above code and its work for me.

Thanks