我希望我的搜索模块得到改进。我通过JQuery实现自动补全。但这还不够。我需要把每个列表上的锚标记，以便当他们点击它，他们将直接到该特定列表的信息页面。我想不出如何修改列表的href
//index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.ui-autocomplete-row
{
padding:8px;
background-color: #f4f4f4;
border-bottom:1px solid #ccc;
font-weight:bold;
}
.ui-autocomplete-row:hover
{
background-color: #ddd;
}
</style>
</head>
<body>
<div class="container" style="padding:120px;">
<h3 align="center">Searcg Student</h3>
<div class="row">
<div class="col-md-12">
<input type="text" id="search_data" placeholder="Enter Student Name..." autocomplete="off" class="form-control input-lg" />
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#search_data').autocomplete({
source: "fetch_data.php",
minLength: 1,
select: function(event, ui)
{
$('#search_data').val(ui.item.value);
}
}).data('ui-autocomplete')._renderItem = function(ul, item){
return $("<a href="student.php/=?" class='ui-autocomplete-row'></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
});
</script>
</body>
</html>
//fetch_data.php
<?php
include('dbcon.php');
if(isset($_GET["term"]))
{
$result = $conn->query("SELECT * FROM student WHERE name LIKE '%".$_GET["term"]."%' ORDER BY name ASC");
$total_row = mysqli_num_rows($result);
$output = array();
if($total_row > 0){
foreach($result as $row)
{
$temp_array = array();
$temp_array['value'] = $row['name'];
$temp_array['label'] = '<img src="images/'.$row['photo'].'" width="70" /> '.$row['name'].'';
$output[] = $temp_array;
}
}else{
$output['value'] = '';
$output['label'] = 'No Record Found';
}
echo json_encode($output);
}
?>
您需要修复select功能并添加src链接，如下所示:
$(document).ready(function(){
$('#search_data').autocomplete({
source: "fetch_data.php",
minLength: 1,
// add this part
select: function( event, ui ) {
window.location.href = ui.item.url;
},
})
})
...
//add the src field to the backend
$temp_array = array();
$temp_array['value'] = $row['name'];
$temp_array['label'] = '<img src="images/'.$row['photo'].'" width="70" /> '.$row['name'].'';
$temp_array['src'] = ... $row['id']; // add link like '/student.php/?id='.$row['id']
$output[] = $temp_array;