How to put on link in list item on autocomplete search

Question

I like my search module to be improved. I implement autocomplete through JQuery. But it is still not enough. I need to put each list on an anchor tag so that when they click it they will direct to the page of the information of that specific list. I can't figure out how to modify the href of the list

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

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 28 '21 at 19:45

丹尺爪工れ · Answer 1 · 2021-10-28T13:10:48.000

0

You need to fix the select function and add src link like below:

$(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;

edited Oct 28 '21 at 13:10

answered Oct 28 '21 at 12:06

丹尺爪工れ

123
7

how to put value on that equal sign next to question mark? – llea 123 Oct 28 '21 at 12:32
i need to put student id on equal sign then use get method to use it on query – llea 123 Oct 28 '21 at 12:36
@llea123 see the changes hope it helps :) – 丹尺爪工れ Oct 28 '21 at 13:11

How to put on link in list item on autocomplete search

1 Answers1