Question

问题：

我的JQuery自动完成功能返回了数据库中的两个关键字。我希望用户在搜索时看到两者，但在选择选项时，只应选择一个关键字并将其作为值插入。

HTML code：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css">
</head>

<body>
    <form action="" method="post">
        <p>
            <label>Country:</label>
            <input type='text' name='country' value='' class='auto'>
        </p>
    </form>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {

            //autocomplete
            $(".auto").autocomplete({
                source: "search.php",
                minLength: 1
            });

        });
    </script>
</body>

</html>

PHP代码：

<?php    
    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 airports WHERE name LIKE :term OR iata LIKE :term');
            $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

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

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

        echo json_encode($return_arr);
    }
?>

输出：

如您所见，整个名称显示在输入字段中。但我只希望缩写在那里。问题是：

如何让用户在搜索时看到全名，但只有在用户做出选择后才选择缩写？

期望的输出：

仅在输入字段中获取机场的缩写（例如JFK）。

Answer 1

此处找到了解决方案：jQuery UI autocomplete shows value instead of label in the input field

$return_arr[] = array('value' => $row['iata'], 'label' => $row['iata'] . ' (' . $row['name'] . ')');

jQuery使用组合label和value，这是解决方案。

从JQuery Autocomplete获取第一个术语

1 个答案: