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