Bootstrap typeahead displays only first letter of the array

Question

When I type letter 'a'

The output comes as follows

    A
    A
    A
    A
    A

If I type 'ad' it disappears

expected output when typing 'a'

*Adilabad
*Adoni
*Amadalavalasa
*Amalapuram

php code for fetching db table data

<?php include_once 'db.php';
     $sql = 'SELECT city_name FROM master_city';
     $res = mysqli_query($con,$sql);
     mysqli_close($con); ?>

my html code

 <input class="input-xlarge focused" 
        id="emp_peraddress_city" name="emp_peraddress_city" 
        type="text" placeholder="city" 
        data-provide="typeahead" data-items="4" 
        data-source="<?php 
    echo"["; 
    while($row=mysqli_fetch_array($res)){ 
        echo "'".$row["city_name"]."',"; 
    } 
    echo"]"; ?>">

The echo sample of my data returned from database is :

['Kolhapur','Port Blair','Adilabad','Adoni','Amadalavalasa','Amalapuram','Anakapalle','Anantapur','Badepalle','Banganapalle','Bapatla','Bellampalle','Bethamcherla','Bhadrachalam','Bhainsa','Bheemunipatnam','Bhimavaram','Bhongir','Bobbili','Bodhan','Chilakaluripet','Chirala','Chittoor','Cuddapah','Devarakonda']

Answer 1

Your city names should be in double quote, like this data-source='["city-1","city-2","city-3"]'.

The data-source should be in JSON format while your output is taken as a string that's why you are getting only the first letter.

Answer 2

Thanks for your contribution for getting the result... This is the code I have done with to get auto-suggest.

I have removed my php codes and done using jquery

HTML part

 <input class='input-xlarge focused' id='emp_peraddress_city' name='emp_peraddress_city' type='text' data-provide='typeahead' data-items='4' data-source='cities'></br>

The jquery part

$.ajax({
        url: 'add_employee/fetch_city_names.php',
        method: 'POST',
        success: function(response) {
            var cities = response;

            $('#emp_peraddress_city').typeahead({source: JSON.parse(cities)});

        }

    });

PHP part: fetch_city_names.php

<?php 
  include_once '../db.php';
 // auto suggest for city
 $sql_city = 'SELECT city_name FROM master_city ORDER BY city_name';

  $res_city = mysqli_query($con, $sql_city);
   $data_city = array();
  while ($row_city = mysqli_fetch_array($res_city)) {

  $data_city[].=$row_city["city_name"];
    }
  $convert_city = json_encode($data_city); // converting String array to JSON

    echo $convert_city;
    mysqli_close($con);             

    ?>

Thanks everybody..