2016-04-21 290 views
0

即時製作一個自動完成搜索框,列出不同的課程,基本上我試圖做的是使用它旁邊的搜索按鈕來顯示選定課程的結果在另一個頁面上使用SQL數據庫。該網頁看起來是這樣的:index.php將一個變量從一個頁面導入到另一個PHP

所以,無論選擇,你從自動完成挑,我則希望「搜索課程」按鈕鏈接到另一個頁面,並立即從搜索框中顯示所選課程的結果之前的頁面。這些結果將從SQL數據庫中提取。

我基本上無法連接所有東西,無法弄清楚。

這是我的搜索框和按鈕:

<div class="row"> 
    <div class="ui-widget col-md-4 col-md-offset-4"> 
    <label for="tags">Search: </label> 
    <input id="tags" type="search"> 
    <input type="submit" value="Search Courses"> 
    </div> 
</div> 

我是否需要設置某種變量要傳遞到下一個頁面?

感謝任何幫助,謝謝。

這是我autocomplete.php文件:

<?php 
$mysqli = new mysqli("localhost", "scott", "tiger", "courses"); 
$term = mysqli_real_escape_string($mysqli,$_REQUEST['term']); 
$query = " 
SELECT title 
    FROM course 
WHERE title LIKE '$term%' 
ORDER BY title"; 
$return = array(); 
$result = $mysqli->query($query); 
while ($row = $result->fetch_array()){ 
    array_push($return,$row[0]); 
} 
echo json_encode($return); 
?> 

的index.html:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Edinburgh Napier University</title> 
    <div class="row"> 
    <div class="col-md-4 col-md-offset-4"> 
    <img id="napierlogo" src="logo.jpg"/> 
    </div> 
    </div>  

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
$(function() { 
$("#tags").autocomplete({ 
    source: "autocomplete.php", 
    autoFocus:true 
}); 
}); 
</script> 

<script> 
    $(function() { 
    $("#menu").menu(); 
    }); 
    </script> 
    <style> 
    .ui-menu { width: 150px; } 
    </style> 

    <script> 
    $(function() { 
    $("input[type=submit]") 
     .button() 
     .click(function(event) { 
     event.preventDefault(); 
     }); 
    }); 
    </script> 

    <?php 
    isset($_GET['res'])?$var=mysql_escape_string($_GET['res']):$res=''; 
    ?> 

</head> 
<body> 

<p></p>  

<div class="row"> 
    <div class="ui-widget col-md-4 col-md-offset-4"> 
    <label for="tags">Search: </label> 
    <input id="tags" type="search"> 
    <input type="submit" value="Search Courses"> 
    </div> 
</div> 

<p></p> 

<ul id="menu"> 
    <li><a href="http://socwebtech1.napier.ac.uk/~40171342/course/index.php">Search</li> 
    <li><a href="http://my.napier.ac.uk/Pages/Home.aspx">myNapier</a></li> 
    <li>Contact Us 
    <ul> 
     <li><a href="https://www.facebook.com/EdinburghNapierUniversity/">Facebook</li> 
     <li><a href="https://twitter.com/EdinburghNapier? ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</li> 
     <li><a href="https://uk.linkedin.com/edu/edinburgh-napier-university-12617">LinkedIn</li> 
    </ul> 
    </li> 
</ul> 

</body> 
</html> 
+0

您可以向我們展示您迄今爲止編寫的任何PHP/JavaScript代碼嗎? –

+0

加了man :) –

+0

我也有一個results.php頁面,結果應該顯示,但到目前爲止它與我的index.php頁面相同 –

回答

2

首先,如果它沒有準備好,你的索引頁需要一個.php文件而不是.html

其次,您需要將您的搜索框修改爲單擊搜索按鈕時提交的表單。這將發送POST請求到results.php頁面,然後可以使用在文本框中輸入的搜索詞從數據庫加載結果。

你的文本框的HTML代碼應該變成:

<div class="row"> 
    <form action="results.php" method="post"> 
    <div class="ui-widget col-md-4 col-md-offset-4"> 
     <label for="tags">Search: </label> 
     <input id="tags" type="search" name="search"> 
     <!-- Added the 'name' attribute^here 
      we'll need this later in the PHP file --> 
     <input type="submit" value="Search Courses"> 
    </div> 
    </form> 
</div> 

而且results.php應在頂部類似這樣有一些PHP代碼:

<?php 

$searchTerm = $_POST["search"]; 
// Key part -> ^^
// this needs to match the name of the search box in html 

// TODO -- Sanitize this input (NEVER trust user input) 
// using mysqli_real_escape_string() or similar. 
// Then use it to perform your search 

// Just for testing: 
echo $searchTerm; 
$_POST

更多信息,請點擊這裏:http://php.net/manual/en/reserved.variables.post.php

作爲一個方面說明,你應該真的使用PDO用於數據庫訪問。它具有許多強大的功能,包括有助於防止SQL注入的「準備好的語句」。這是最好的做法,對未來的可維護性很有好處。

此處瞭解詳情:http://code.tutsplus.com/tutorials/why-you-should-be-using-phps-pdo-for-database-access--net-12059

1

當使用jQuery自動完成與AJAX的source請求是GET。嘗試將您的變量更改爲$_GET['term'],併爲您提供輸入框name="term"。然後將你的功能改成這樣的東西。

$(document).on("ready",function() {   
    $("#tags").autocomplete({ 
    source: "autocomplete.php", 
    autoFocus:true 
    }); 
}); 

編輯:您還遺漏了一些鏈接上的結束標記。我會建議整理你的HTML的代碼。

相關問題