Devbridge JQuery自动完成无法使用serviceUrl

Devbridge JQuery Autocomplete not working with serviceUrl

本文关键字：serviceUrl JQuery Devbridge      更新时间：2023-09-26

我正在尝试实现devBridge自动完成，但它不能与ajax一起使用。当我使用一个没有php的手动json对象，但我需要从数据库中获取数据时，它就可以工作了。PHP代码：

 <?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代码：

<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代码

$(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); }
    });
});

您的响应应该是有效的JSON和以下格式：

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

你所返回的似乎并没有这种结构。

对于其他有同样问题的人：你应该这样管理响应：

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