Javascript 仅从JQuery自动完成中获取第一个术语_Javascript_Php_Jquery_Sql_Autocomplete

Javascript 仅从JQuery自动完成中获取第一个术语

javascript php jquery sql autocomplete

Javascript 仅从JQuery自动完成中获取第一个术语,javascript,php,jquery,sql,autocomplete,Javascript,Php,Jquery,Sql,Autocomplete,问题： <!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

问题：

<!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    
    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);
    }
?>

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

HTML代码：

<!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    
    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);
    }
?>


演示

国家：

$（函数（）{
//自动完成
$（“.auto”）.autocomplete({
来源：“search.php”，
最小长度：1
});
});

PHP代码：

<!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    
    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);
    }
?>

输出：

<!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    
    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);
    }
?>

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

如何允许用户在搜索时查看全名，但仅在用户做出选择后选择缩写

所需输出：

<!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    
    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）。

可在此处找到解决方案：

jQuery使用组合的

标签

和

值

，这就是解决方案。

解决方案在这里找到：

jQuery使用组合

标签

和

值

，这是解决方案。

您已经检查过了吗？我猜

$return\u arr[]=array（'id'=>$row['iata']，'value'=>$row['iata']，'text'=>$row['iata']。（'.$row['name']）应执行以下操作：trick@Bob0t没有，缩写只显示，而不是机场的全名。试着在演示中搜索JFK：你已经检查过了吗？我猜$return\u arr[]=array（'id'=>$row['iata']，'value'=>$row['iata']，'text'=>$row['iata']。（'.$row['name']）应执行以下操作：trick@Bob0t没有，缩写只显示，而不是机场的全名。尝试在演示中搜索JFK：