typeahead bootstrap not working with dynamic data from php page

Question

I want to use typeahead on input text, but it's not working.

my html :

<link rel="stylesheet" type="text/css" href="<?php echo base_url('asset/css/typeahead.css')?>">

<?php foreach ($driver as $d) { ?>
    <input type="text" class="form-control input-lg typeahead" autocomplete="off" data-provide="typeahead" data-source="<?php echo $d['email']; }; ?>" id="email"  name="email">

<script src="<?php echo base_url('asset/js/typeahead.bundle.min.js') ?>"></script>

My controller :

$this->db->select("*");
$this->db->from('user');
$query = $this->db->get();
$data['driver'] = $query->result_array();

When I start typing in input text, it shows nothing, it should be dropdown the email list provided from select query. No error return.

Answer 1

There is problem in your code. You are looping for each $driver and showing its email id in the data-source and the input tag is not closing.

For using bootstrap typeaded

1. Get list of all emails from $driver using following code
   $emails = array_column($driver, 'email');
2. Create a string which will contain all the emails. All the emails should be wrapped in double quotes(") and seperated by comma (,)
   $csv = "\"" . implode("\",\"", $emails) . "\"";
3. Now create the typeahed input tag
   <input type="text" class="form-control input-lg typeahead" autocomplete="off" data-provide="typeahead" data-source='[<?php echo $csv; ?>]' id="email" name="email">
   Remember that the data-source attribute has single quote as start and end.