时间戳

首页 > 解决方案 > 如何在自动完成搜索的列表项中添加链接

php - 如何在自动完成搜索的列表项中添加链接

问题描述

我喜欢改进我的搜索模块。我通过 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);
    }
    ?>

标签： phphtmljqueryjquery-ui-autocomplete

解决方案

您需要修复 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;

推荐阅读