具有隐藏输入的自动完成

AutoComplete with hidden input

本文关键字：隐藏 输入      更新时间：2023-09-26

我是 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);

？>

和我的输入： 

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

提前谢谢你:)

试试这个：

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

你的 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);
    }
});

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

<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"}]
相关文章：