Question

我有一个自动填充字段，它会触发服务器搜索带有JSON响应的数据库中的fullname。

当我使用本地数组时工作正常但是当我使用JSON服务器响应时，即使在网络控制台中响应似乎正确（据我所知），建议列表也不会更新。

我的控制台没有错误，这不是CSS问题，因为当我检查代码时，建议div为空。

这是我的html输入字段：

<input type="text" id="form_fullname" name="form[fullname]" required="required" class="contact-select form-control" autocomplete="off" data-cip-id="form_fullname">

以下是autocomplete-suggestions div：

<div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div>

这是我的js：

$('.contact-select').autocomplete({
    serviceUrl: 'contacts/search/fullname/',
    minChars: 3,
    deferRequestBy: 200
})

这是一个JSON响应（在JSONLint上验证）：

{"query":"vial-","suggestions":["VIAL-COLLET, Bastien"]}

Answer 1

哎呀...我在ajaxComplete回调中添加了自动完成方法......不明白为什么！它现在正在完美运作。

Answer 2

我使用相同的自动完成插件，一切正常，但建议列表在用户输入时不会更新。整个清单就出现在那里。

这是我的JS代码：

`$('#searchName').autocomplete({
        serviceUrl: "getfoodname.php",
        minChars: 2,
        onSelect: function (suggestion) {
                //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                window.open("/detail.php?MonAnID="+suggestion.data,"_self")
                }
            });`

这是我的PHP代码

`include 'dbconnection.php';
    // Check connection
    if ($conn->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    } 

    $keyword = $_GET['query'];

    //Build final SQL statement to search
    $selectsql = "SELECT MonAnID, MonAnName FROM ListMonAn WHERE MonAnName LIKE '%".$keyword."%'";
    //Display data to table
    $result = $conn->query($selectsql);

    $suggestions = array();

    if ($result->num_rows > 0) {
         // output data of each row
        while($row = $result->fetch_assoc()) {  

                $foodname = $row["MonAnName"];
                $foodid = $row["MonAnID"];  

                $suggestions[] = array(
                "value" => $foodname,
                "data" => $foodid
                );
            }       
    }

    echo json_encode(array(
        'query' => $keyword,
        'suggestions' => $suggestions));
    conn.close();`

Answer 3

我有同样的症状，这为我解决了。

这是我以前的

$(document).ajaxComplete(function () {
    $('#SelectedInput').autocomplete({
        serviceUrl: '/AutoComplete/' + $('#SelectedInput').attr('data-autocomplete-action'),
        dataType: 'json'
    });
});

这就是我所拥有的

$(document).ajaxComplete(function (event, xhr, options) {
    var modalLoadUrl = '/MyController/GetModalContent';
    if (options.url == modalLoadUrl) {
        $('#SelectedInput').autocomplete({
            serviceUrl: '/AutoComplete/' + $(el).attr('data-autocomplete-action'),
            dataType: 'json'
        });
    }
});

我出错的地方：每次打开模态时，我都会使用 ajax 调用动态加载“SelectedInput”。然后我在 ajax complete 函数中设置了自动完成功能。然而，每次我使用 ajax 搜索具有自动完成功能的查询时，这也会触发，这导致每次输入新内容时搜索都会重置。

我是如何修复它的：我需要做的就是将自动完成方法放在一个 if 语句中，检查请求的 url 是否与用于加载页面的 ajax 调用的 url 匹配。现在自动完成方法只在加载模态时运行一次。

使用Ajax的Devbridge AutoComplete不会填充建议

3 个答案: