Question

我是AJAX的新手，我的自动完成功能需要帮助。我需要将用户选择的ID放在隐藏的输入中。我尝试了很多东西，但那并没有结束......目前，我的功能都没有。我告诉你我的代码：

我的JS代码：

$( "#recherche" ).autocomplete({
source: function(request, response) {
    $.ajax({
        serviceUrl: 'rechercheadherant.php',
        dataType: "json",
        type: "POST",
        data: {
            keyword: request.term
        },
        success: function(data){
            response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.value    
                }
            }));
         }
    })
}
select: function(event, ui) {
    $("#id").val(ui.item.value);
}

}）;

我的PHP代码（rechercheadherant.php）：

<?php
if(isset($_GET['query'])) {

    // Mot tapé par l'utilisateur
    $q = htmlentities($_GET['query']);
    $searchArray = array();
    // Connexion à la base de données
    require_once('lib/pdoconnect.php');

    // Requête SQL
    $requete = "SELECT `Ad_Id`, `Ad_Nom`, `Ad_Prenom`, `Ad_DateDeNaissance` FROM `adherant` WHERE `Ad_Nom` LIKE '". $q ."%' LIMIT 0, 10";

    // Exécution de la requête SQL
    $resultat = $connection->query($requete) or die(print_r($connection->errorInfo()));

    // On parcourt les résultats de la requête SQL
    while($search = $resultat->fetch(PDO::FETCH_ASSOC)) {
        // On ajoute les données dans un tableau
        $DateNaissance = $search["Ad_DateDeNaissance"];
        $FormatDate = date("d/m/Y", strtotime($DateNaissance));

        $NomPrenom=$search['Ad_Nom']." ".$search['Ad_Prenom']." ".$FormatDate;

        $link = '';
        $link .= $search['Ad_Id'].', '.$search['Ad_Nom'].' '.$search['Ad_Prenom'].', '.$search['Ad_DateDeNaissance'];

        array_push($searchArray, array('label'=> $link, 'value' => $link, 'id'=>$search['Ad_Id']));
}

echo json_encode($searchArray);

＆GT;

和我的意见：

 <input class="form-control" placeholder="Saisir le nom de l'adhérant recherché" type="text" id="recherche">
          <input type="hidden" id="id" name="id">

提前感谢您：）

Answer 1

您的JS代码中存在一些错误，尤其是select事件之前缺少逗号（，）：

$("#recherche").autocomplete({
    source: function(request, response) {
        $.ajax({
            serviceUrl: 'rechercheadherant.php',
            dataType: "json",
            type: "POST",
            data: {
            keyword: request.term
            },
            success: function(data){
                response(data);
            }
        });
    },
    select: function(event, ui) {
        $("#id").val(ui.item.value);
    }
});

这是一个完整的工作示例。 HTML文件：

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script>
$(document).ready(function() {
    $("#recherche").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'data.json',
                dataType: "json",
                type: "POST",
                data: {
                    keyword: request.term
                },
                success: function(data){
                    response(data);
                },
                error: function(data){
                    alert(data.statusText);
                }
            });
        },
        select: function(event, ui) {
            $("#id").val(ui.item.value);
        }
    });
});
</script>
<input class="form-control" placeholder="Saisir le nom de l'adhérant recherché" type="text" id="recherche">
<input type="hidden" id="id" name="id">

data.json文件基于您提供的JSON数据：

[{"label":"1, Grignon Fran\u00e7ois, 1994-11-08","value":"1, Grignon Fran\u00e7ois, 1994-11-08","id":"1"},{"label":"3, Guillemont Victoria, 1997-06-18","value":"3, Guillemont Victoria, 1997-06-18","id":"3"}]

Answer 2

试试这个：

$('#recherche').on('autocompleteselect', function (e, ui) {
    $('#id').val(ui.item.value);
});

自动完成隐藏输入

2 个答案: