Question

我正在尝试显示一个不公开的搜索结果，该搜索结果可以根据数据库中的搜索（mysql）将目标html页面的点击事件。

我正在使用PhoneGap。

到目前为止，我设法实现了一个简单的PHP和jQuery脚本，它让我从一个完成搜索的自动完成搜索字段中简单地弹出。但是我希望用户能够点击它并被定向到一个不同的页面，其中包含从数据库中显示的唯一信息。

PHP ：

<?php
    header("Access-Control-Allow-Origin: *");
    $con = mysqli_connect('localhost', 'root', '', 'qc_artwork') or die ("could not connect database");

    //get search term
    $searchTerm = $_GET['term'];

    //get matched data from name table
    $query = $con->query("SELECT * FROM artwork WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['name'];
    }

    //return json data
    echo json_encode($data);
?>

HTML ：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/ionic.css">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(function() {
                    $( "#searchField" ).autocomplete({
                        source: 'http://localhost/search.php'
                    });
                });
            });
        </script>
   </head>
   <body>
       <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
           <a href="index.html" class="button button-clear">Home</a>
           <h1 class="title">Search Database (JSON)</h1>
       </div><br/><br/>
       <p>
           <input type="text" id="searchField" placeholder="AF artwork">
       </p>
    </body>
</html>

我的SQL表包含5列：

ID
名称
路径
条形码
型

最终目标计划是最终将这些独特的图像/ pdf显示在所选搜索的唯一页面中。

但我的主要问题是我如何让用户能够点击不公开的结果并被定向到具有从数据库显示的唯一信息的其他页面？

Answer 1

使用on select回调（its in the docs），在您的json中加入id，label和value，然后点击使用{{1导航到页面。您还可以使用ajax调用加载内容。

因此，例如使用ajax获取内容：

window.location.href

并且您的<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/ionic.css"> <link rel="stylesheet" href="css/jquery-ui.css"> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui.js"></script> </head> <body> <div class="bar bar-header bar-positive" style="margin-bottom:80px;"> <a href="index.html" class="button button-clear">Home</a> <h1 class="title">Search Database (JSON)</h1> </div><br/><br/> <p> <input type="text" id="searchField" placeholder="AF artwork"> </p> <div id="result"></div> <script type="text/javascript"> $(document).ready(function() { $(function() { $( "#searchField" ).autocomplete({ source: './search.php', minLength: 2, select: function( event, ui ) { $.ajax({ url: "./search.php", method: "GET", data: { id: ui.item.id } }).done(function(data) { $('#result').html('This is the result for: '+data.id+' - '+data.name); }).fail(function(xhr) { $('#result').html('Failed to load result!'); }); } }); }); }); </script> </body> </html>文件看起来像下面的SQL注入是安全的，因为它使用准备好的查询：

search.php

未经测试但应该可以使用。

使用PHP

1 个答案: