自动完成问题

Question

我正在尝试使用 jquery 自动完成功能在 input 字段中显示用户列表。我在向字段显示名称和选择更新值时遇到问题。

我的 PHP 代码：

    include '../_db.php';

    // get what user typed in autocomplete input
    $name = trim($_GET['name']);

    $param = "%{$name}%";
    $query = $conn->prepare('SELECT emp_number, emp_firstname, emp_lastname FROM `hs_hr_employee` WHERE emp_firstname LIKE ? OR emp_lastname LIKE ? ');
    $query->bind_param('ss', $param,$param);
    $query->execute();

    $query->bind_result($emp_number,$emp_firstname,$emp_lastname);
    $a_json = array();
    $a_json_row = array();

    while( $query->fetch() )
    {
        $a_json_row["emp_number"] = $emp_number;
        $a_json_row["fname"] = $emp_firstname;
        $a_json_row["lname"] = $emp_lastname;
        array_push($a_json, $a_json_row);
    }

    $json = json_encode($a_json);
    print $json;

    $query->close();

我的 JS 代码

$(function()
{
    $( "#search-emp" ).autocomplete(
    {
        source: function (request, response)
        {
            var form_data = {
                ajax                : '1',
                name                : $("#search-emp").val(),
                actioncall          : 'search-emp'
            };

            $.ajax({
                type: "POST",
                url: "_ajax.php",
                data: form_data,
                success: function(response)
                {
                    $.each( response, function( key, value )
                    {
                        //alert( key + ": " + value );
                        console.log('element at index ' + key + ' is ' + JSON.parse(value));
                    });
                    //console.log(response);
                },
                dataType: 'json'
            });
        }
    }, {minLength: 3 });
});

得到响应

[{"emp_number":1,"fname":"Arslan","lname":"Hassan"},{"emp_number":2,"fname":"Muneeb","lname":"Janjua" },{"emp_number":3,"fname":"hr","lname":"user"}]

我的 HTML 代码

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Employee Name: </label>
        <input id="search-emp" type="text" class="form-control" placeholder="*">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">Date Range: </label>
        <input type="text" class="form-control" id="dp-from" placeholder="From">
        <input type="text" class="form-control" id="dp-to" placeholder="To">
    </div>
    <button type="submit" class="btn btn-primary">Genrate Report</button>
</form>

Answer 1

问题是因为 jQuery 自动完成希望有两个名为 label 和 value 的字段。来自label 的内容将显示在自动完成中。

因为您的服务器会为您的密钥返回其他名称，所以您有 2 个选项：

1. 更改服务器以返回类似的 json：

   [{"emp_number":1,"fname":"Arslan","lname":"Hassan", "label":"Arslan Hassan", "value": "Arslan Hassan"},....]

2. 或者在来自 ajax 的成功回调上创建一个包含此字段的数组（label 和 value）并将此数组传递给 response() 回调。

您可以在这里找到更多信息：http://api.jqueryui.com/autocomplete/#option-source

Answer 2

在您的 AJAX 请求中，

$.ajax({
            type: "POST",
            url: "_ajax.php",
            data: form_data,
            success: function(response)
            {
                $.each( response, function( key, value )
                {
                    //alert( key + ": " + value );
                    console.log('element at index ' + key + ' is ' + JSON.parse(value));
                });
                //console.log(response);
            },
            dataType: 'json'
        });

指定 contentType 以获得正确的响应。

 contentType: "application/json",