时间戳

首页 > 解决方案 > 自动完成从数据库输出两个字段

javascript - 自动完成从数据库输出两个字段

问题描述

我有以下代码用于自动完成输入，用户可以在其中输入nome员工的而不是ID：

if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT * FROM colaboradores WHERE nome LIKE :term');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr[] =  $row['nome'];
        }



    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }


/* Toss back results as json encoded array. */
echo json_encode($return_arr);

现在的输出是这样的：
在此处输入图像描述

我需要输出带有 ID 的名称，但只将nome信息发送到数据库

更新 这是脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>  
<link rel="stylesheet" href="css/autocomplete.css" />       
<script type="text/javascript">
    $(function() {  
        //autocomplete
        $(".auto").autocomplete({
            source: "search.php",
            minLength: 1,
            messages: {
                noResults: '',
                results: function() {}
        }
    });                
});
</script>

标签： javascriptphpjqueryjquery-ui-autocomplete

解决方案

我相信您可以将标签和值返回给自动完成功能：

在您的 PHP 中：

while($row = $stmt->fetch()) {
    // add the ID inside () chars
    $return_arr[] =  [
        'label' => $row['nome'],
        'value' => $row['id']
    ]; 
}

在你的 JS 中：

$(function() {
    $(".auto").autocomplete({
        source: "search.php",
        focus: function(event, ui) {
            event.preventDefault();
            // manually update the textbox
            $(this).val(ui.item.label);
        },
        select: function(event, ui) {
            event.preventDefault();
            // manually update the textbox and readonly field
            $(this).val(ui.item.label);
            $("#other-input").val(ui.item.value);
        }
    });
});

或者：您可以尝试将 ID 放在一些分隔符中，然后在发送到数据库之前将 ID 去掉。像这样的东西：

if (isset($_GET['term'])){

    // strip out the (ID) before searching in DB
    $nomeOnly = preg_replace('/ \(.*\)/', '', $_GET['term']);

    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT * FROM colaboradores WHERE nome LIKE :term');
        $stmt->execute(array('term' => '%'.$nomeOnly.'%'));

        while($row = $stmt->fetch()) {
            // add the ID inside () chars
            $return_arr[] =  $row['nome'] . ' (' . $row['id'] . ')'; 
        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    /* Toss back results as json encoded array. */
    echo json_encode($return_arr);
}

推荐阅读