使用PHP显示未列出的自动完成搜索结果 [英] Display unlisted auto-complete search results with PHP
问题描述
我试图显示一个未列出的搜索结果，该搜索结果能够根据从数据库（mysql）搜索到的目标html页面发出点击事件。
我正在使用PhoneGap。
到目前为止，我设法实现了一个简单的PHP和jQuery脚本，使我可以从自动完成搜索字段中简单弹出，搜索。但是，我希望用户能够点击它并将其导向到另一个页面，其中包含从数据库中显示的唯一信息。
PHP ：
<？php
header（Access-Control-Allow-Origin：*）;
$ con = mysqli_connect（'localhost'，'root'，''，'qc_artwork'）或die（无法连接数据库）;
//获取搜索字词
$ searchTerm = $ _GET ['term'];
//从名称表中获取匹配数据
$ query = $ con> query（SELECT * FROM artwork WHERE name LIKE'％。$ searchTerm。％'ORDER BY名称ASC）;
while（$ row = $ query-> fetch_assoc（））{
$ data [] = $ row ['name'];
}
//返回json数据
echo json_encode（$ data）;
？>
HTML ：
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheettype =text / csshref =css / ionic.css>
< link rel =stylesheethref =css / jquery-ui.css>
< script type =text / javascriptsrc =cordova.js>< / script>
< script type =text / javascriptsrc =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-positivestyle =margin-bottom：80px;>
< a href =index.htmlclass =button button-clear>主页< / a>
< h1 class =title>搜索数据库（JSON）< / h1>
< / div>< br />< br />
< p>
< input type =textid =searchFieldplaceholder =AF artwork>
< / p>
< / body>
< / html>
我的SQL表由5列组成：
- id
- 名称
- 路径
- id
- name
- path
- barcode
- type
$ b
$ b
最终目标计划是最终将这些独特的图片/ pdf显示在独特的网页中所选搜索。
但我的主要问题是我如何让用户能够点击未列出的结果并将其定向到不同的页面，其中包含从数据库中显示的唯一信息？
使用on select callback（它的文档），包括在你的json中使用，标签和值然后点击使用 window.location.href 导航到页面。您也可以使用ajax调用来加载内容。
例如，使用ajax获取内容：
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheettype =text / csshref =css / ionic.css>
< link rel =stylesheethref =css / jquery-ui.css>
< script type =text / javascriptsrc =cordova.js>< / script>
< script type =text / javascriptsrc =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-positivestyle =margin-bottom：80px;>
< a href =index.htmlclass =button button-clear>主页< / a>
< h1 class =title>搜索数据库（JSON）< / h1>
< / div>< br />< br />
< p>
< input type =textid =searchFieldplaceholder =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（'无法加载结果！'）;
}）;
}
}）;
}）;
}）;
< / script>
< / body>
< / html>
并且您的 search.php 文件看起来像下面这样从SQL注入是安全的，因为它使用准备好的查询：
<？php
header（ Access-Control-Allow-Origin：*）;
$ response = function（$ data = []）{
header（'Content-Type：application / json'）;
exit（json_encode（$ data））;
};
$ con = mysqli_connect（'localhost'，'root'，''，'qc_artwork'）;
if（！$ con）{
http_response_code（500）;
$ response（['error'=&';'无法连接数据库']）;
}
//自动完成搜索词
if（isset（$ _ GET ['term']））{
//获取搜索词
$ searchTerm = isset（$ _ GET ['term']）？ '％'。$ _ GET ['term']。'％'：null;
//从名称表中获得匹配数据
$ stmt = $ con> prepare（SELECT * FROM artwork WHERE name LIKE？ORDER BY name ASC）;
$ stmt-> bind_param（'s'，$ searchTerm）;
$ result = $ stmt-> get_result（） - > fetch_all（MYSQLI_ASSOC）;
foreach（$ result as $ row）{
$ data [] = [
'id'=> $ row ['id']，
'label'=> $ row ['name']，
'value'=> $ row ['id']，
];
}
$ response（$ data）;
}
//结果项目
if（！empty（$ _ GET ['id']））{
//从名称表中获取匹配的数据
$ stmt = $ con> prepare（SELECT * FROM artwork WHERE id =？LIMIT 1）;
$ stmt-> bind_param（'i'，$ searchTerm）;
$ response（$ stmt-> get_result（） - > fetch（MYSQLI_ASSOC））;
}
？>
未经测试但应该有效。
I am trying to display an unlisted search results which is able to have a click event to a target html page based on the search from the database (mysql).
I am using PhoneGap.
So far I managed to implement a simple PHP and jQuery script that gives me a simple pop down from an auto-complete search field which completes the search. But I want the user to be able to click on it and be directed to a different page with unique information displayed from the database.
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>
My SQL table consists of 5 columns:
The end-goal plan is to eventually display those unique images/pdfs into the unique pages from the selected search.
But my main question is How am I able to let the user to be able to click on an unlisted result and be directed to a different page with unique information displayed from the database?
Use the on select callback (its in the docs), include the id, label and value in your json then on click use a window.location.href to navigate to the page. You could also load the content in using an ajax call.
So for example using ajax get the content:
<!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>
And your search.php file, would look like the following which is safe from SQL injection as it uses prepared queries:
<?php
header("Access-Control-Allow-Origin: *");
$response = function ($data = []) {
header('Content-Type: application/json');
exit(json_encode($data));
};
$con = mysqli_connect('localhost', 'root', '', 'qc_artwork');
if (!$con) {
http_response_code(500);
$response(['error' => 'could not connect database']);
}
// auto complete search term
if (isset($_GET['term'])) {
//get search term
$searchTerm = isset($_GET['term']) ? '%'.$_GET['term'].'%' : null;
//get matched data from name table
$stmt = $con->prepare("SELECT * FROM artwork WHERE name LIKE ? ORDER BY name ASC");
$stmt->bind_param('s', $searchTerm);
$result = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
foreach ($result as $row) {
$data[] = [
'id' => $row['id'],
'label' => $row['name'],
'value' => $row['id'],
];
}
$response($data);
}
// result item
if (!empty($_GET['id'])) {
//get matched data from name table
$stmt = $con->prepare("SELECT * FROM artwork WHERE id = ? LIMIT 1");
$stmt->bind_param('i', $searchTerm);
$response($stmt->get_result()->fetch(MYSQLI_ASSOC));
}
?>
Untested but should work.
这篇关于使用PHP显示未列出的自动完成搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
