简体   繁体   中英

Devbridge JQuery Autocomplete not working with serviceUrl

I am trying to implement the devBridge autocomplete but it doesnt work with ajax. It works when I use a manual json object without the php but I need to get the data from database. PHP CODE:

 <?php
require_once "medoo.php";
$database = new medoo([
    'database_type' => 'mysql',
    'database_name' => 'elektriksikayet',
    'server' => 'localhost',
    'username' => 'root',
    'password' => '',
    'charset' => 'utf8',
    'port' => '3307'
]);
$return_arr = [];
$keyword =  $_POST['keyword'];
$companies = $database->select('companies','company_name');
foreach ($companies as $comp){
    $row_array['label'] = $comp;
    array_push($return_arr, $row_array);
}
echo json_encode($return_arr);
?>

HTML CODE:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-autocomplete.js"></script>
    <script src="js/companyAutoComplete.js"></script>
</head>
<body>
<input type="text" id="autocomplete"/>
</body>
</html>

JS CODE

$(document).ready(function () {
    $("#autocomplete").autocomplete({
        serviceUrl:'AutoComplete.php', //tell the script where to send requests
        //callback just to show it's working
        onSelect: function(value){ alert('You selected: ' + value); }
    });
});

Your response should be valid JSON and following format:

   {
        suggestions: [
            { "value": "United Arab Emirates", "data": "AE" },
            { "value": "United Kingdom",       "data": "UK" },
            { "value": "United States",        "data": "US" }
        ]
    }

It does not seem that what you are returning has this structure.

For other persons who has the same problem: You should manage the response like this way:

$("#autocomplete").autocomplete({
        serviceUrl:'AutoComplete.php'
        transformResult: function (response) {
                return {
                    suggestions: $.map(response, function(dataItem) {
                        return { value: dataItem.name, data: dataItem };
                    })
                };
            },
        });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM