javascript - 在提交时传递主键而不是属性

Question

我有一个输入标签，它接受用户输入，调用 AJAX 从我的数据库动态输出建议。问题是我想存储与该属性关联的主键。

我想出了一种方法，当用户选择一个值时将它设置为主键；但是我宁愿只在前端显示属性。基本上我想做的是使用选项标签并将值设置为主键，但在阅读它的文档后，这看起来行不通。

HTML:

    <input type="text" id = "zip_id" class="tftextinput2" autocomplete = "off" name="zip" placeholder="Zip Code" onkeyup = "autocompleter()">
    <ul id = "zip_codes_list_id"></ul>

JS:

function autocompleter() 
{
    var min_length = 1; // min caracters to display the autocomplete
    var keyword = $('#zip_id').val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#zip_codes_list_id').show();
                $('#zip_codes_list_id').html(data);
            }
        });
    } else {
        $('#zip_codes_list_id').hide();
    }
}
// set_item : this function will be executed when we select an item
function set_item(item) 
{
    // change input value
    $('#zip_id').val(item);
    // hide proposition list
    $('#zip_codes_list_id').hide();
}

PHP:

<?php
    //connect to db here
    $keyword = '%'.$_POST['keyword'].'%';
    $sql = "SELECT * FROM zip_codes WHERE zip LIKE (:keyword) ORDER BY zip_codes_id ASC LIMIT 0, 10";
    $query = $pdo->prepare($sql);
    $query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
    $query->execute();
    $list = $query->fetchAll();
    foreach ($list as $rs) 
    {
        // put in bold the written text
        $zip = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['zip']);
        // add new option
        // echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['zip']).'\')">'.$zip.'</li>'; (this one only passes the attribute)
        echo '<li " onclick="set_item(\''.str_replace("'", "\'", $rs['zip_codes_id']).'\')">'.$zip.'</li>'; 
//this one passes the attribute but changes the displayed value to the primary key.
    }
?>

正如您从 PHP 文件中看到的那样，我试图做的是传入主键值，但保留显示值属性。我不知道该怎么做。我应该使用 UL 标签吗？

Answer 1

您的代码中的问题是您尝试为输入输入 zip_id 值，但此输入包含 zip 字段值 - 我假设它是文本表示。有几种方法可以在前端保存 zip_id - 要么将其存储在模型中(如果您使用的是某些 MVC 框架，但我想情况并非如此)或者简单地添加一个隐藏输入框:

<input type="hidden" id="actual_zip_id" name="zip_id">

和

function set_item(item) 
{
    // change input value
    $('#actual_zip_id').val(item);
    // hide proposition list
    $('#zip_codes_list_id').hide();
}

更新

谈到自动完成邮政编码的整个想法，它看起来很讨厌，正如 Darren Gourley 所指出的那样(查看评论)。

所以你宁愿先用正则表达式验证它，然后像那样做你的数据库相关的逻辑:

$('#zip_id').on('change', function(){
  // your stuff
})

最好的问候，亚历山大