CODEWITHSUNDEEP
javascriptphpjqueryajax
ImBhavin95
ImBhavin95

Reputation: 1527

jQuery Autocomplete with Ajax Suggetion Not Return

So simple to set jQuery Autocomplete is not working for me why i am strange for this can you please check what is problem in this?

Jquery Function

$("#location_suggetion").autocomplete({
    autoFocus: true,
    minLength: 1,
    source: function(request,response) {
        $.ajax ({
            url: base_url+'data_check/get_location',
            data: {term: request.term},
            dataType: "jsonp",
            cache: false,
            success: function(data) {
                response( $.map( data.suggestions, function( item ) {
                    return {
                        label: item,
                        value: item
                    }
                }));    
            } 
        });
    },
});

PHP File Code

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();
$html = '';
$html.= '[';
foreach($results as $result){
    $html.= '{ label: "'.$result->name.', '.get_country_row($result->country_id)->name.'", value: "'.$result->name.'" },';
}
$html.='];';

echo $html;

Console Get me Result

[{ label: "Rangat, India", value: "Rangat" },{ label: "Rajahmundry, India", value: "Rajahmundry" },{ label: "Rajamahendri, India", value: "Rajamahendri" },{ label: "Rajampet, India", value: "Rajampet" },{ label: "Rajendranagar, India", value: "Rajendranagar" },{ label: "Rajoli, India", value: "Rajoli" },];

Upvotes: 0

Views: 71

Answers (4)

Suchit kumar
Suchit kumar

Reputation: 11859

jsonp is used for cross domain request. Use json instead. Your JSON date in console is wrong check here . To convert the array in JSON string use json_encode. Change your php code to this:

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();

$html= array();$i=0;

foreach($results as $result){
    $html[$i]['label']=$result->name.', '.get_country_row($result->country_id)->name;

  $html[$i]['value']=$result->name;
$i++;
}
echo json_encode($html);

This can be used directly no need to convert in jquery part as the structure is already matching.

Upvotes: 2

Mikołaj Woźniak
Mikołaj Woźniak

Reputation: 113

When you look at the string that you trying to echo. You will notice that it's not valid json. It ends with comma before the bracket 

// This is valid
[
  { label: "Rajoli, India", value: "Rajoli" }
]

//this is invalid
[
  { label: "Rajoli, India", value: "Rajoli" },
]

Insteadof creating it yourself you can use the json_encode function to parse php array into json

foreach($results as $result){
    $data[] = [
               "label" => $result->name.', '.get_country_row($result->country_id)->name, 
               "value" =>$result->name
    ];
}
//Now parse to json
echo json_encode($data);

You can also decide which side makes the formatting correct {"label": "some string", "value": "data"}

The second issue might be related with that you try to $.map label and value into objects

$("#location_suggetion").autocomplete({
    autoFocus: true,
    minLength: 1,
    source: function(request,response) {
        $.ajax ({
            url: base_url+'data_check/get_location',
            data: {term: request.term},
            dataType: "json", // This is right
            cache: false,
            success: function(data) {
                response( data); // already mapped in backend
            } 
        });
    },
});

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 1667

Conver Array to Json

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();
$html = array();
foreach($results as $result){
    $html[]= array("label" => $result->name.",".get_country_row($result->country_id)->name,
                  "value" => $result->name);
}

echo json_encode($html,JSON_FORCE_OBJECT);

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

I think the problem is in your JSON format returned by php code. Try this:

<script>
    $(function(){
        var arr = [];
        var availableTags = [];

        $.ajax({
            'url'   : 'getdata.php',
            'method': 'get',
            success : function(response){
                arr = JSON.parse(response);

                availableTags = Object.keys(arr).map(function (key) { return arr[key]; });
            },
            async   : false
        });

        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });  
    </script>

Php:

 <?php
    require('connect.php');

    $getDetails = "SELECT id, concat(first_name,' ',last_name) as name FROM test.datatables_demo";
    $details    = mysqli_query($con, $getDetails);

    $response = array();
    if(mysqli_num_rows($details) > 0)
    {
        while($row = mysqli_fetch_assoc($details))
        {
            $response[$row['id']] = $row['name'];
        }
    }

    echo json_encode($response);
?>

Upvotes: 0

Related Questions