搜索结果动态链接

Question

I want to automatically fill out the div with id= id, name, email, company.. after a click on any search result. 单击任何搜索结果后，我想自动用id = id，名称，电子邮件，公司..填写div。 The id from the search result is used as filter to get the appropriate row from Mysql data is coming from the same table used in search.php 搜索结果的ID用作过滤器，以从Mysql数据中获取适当的行，该数据来自search.php中使用的同一表

here is my form 这是我的表格

<link href="../action/css/onlinecustom.css" rel="stylesheet"     type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.js"  type="text/javascript"></script>
<script src="./action/scripts/global2.js" type="text/javascript"></script> 

<script>
function searchq() {
    var searchTxt = $("input[name='search']").val();

     $.post("../action/subs/search.php/", {searchVal: searchTxt}, function(output) {
         $("#output").html(output);
     });
 }

</script>

<title>Search</title>

<body>
<form action="http://comiut.com/index.php/user-records" method="post">
  <input type="text" name="search" Placeholder="enter the search    criteria..." onkeydown="searchq();"/>
  <input type="submit" value ="serach"/>

</form>
//Serach result//
<div id="output"> </div>

//Data to populate upon click on any search result//
    <div id="id"></div> 
    <div id="name"></div>
    <div id="email"></div>
    <div id="company_name"></div>

</body>

** I created a global2.js file ** **我创建了一个global2.js文件**

jQuery('body').on('click', 'a.resultItem', function(e) {
e.preventDefault();
jQuery.ajax({
    url: "http://onlinepcdoc.com/action/subs/getItem.php",
    method: 'post',
    data : jQuery(this).data('id') // see the data attribute we used above in the a tag we constructed
}).done(function(data) {
    jQuery("#id").html(data.id);
    jQuery("#name").html(data.name);
    jQuery("#email").html(data.email);
    jQuery("#company_name").html(data.company);
   });
});

I also created search.php 我还创建了search.php

<?php 

    include '../db/connect6.php';


if(isset($_POST['searchVal'])) {
  $searchq = $_POST['searchVal'];
  $searchq = preg_replace ("#[^0-9a-z]#i","",$searchq);

  $query = mysql_query("SELECT * FROM oz2ts_users WHERE oz2ts_users.id LIKE '%$searchq%' OR oz2ts_users.name LIKE '%$searchq%'") or die("Could not search"); 
  $count = mysql_num_rows($query);
  if($count == 0){
     $output = 'There is no result to show!'; 
       } else{ 
        while($row = mysql_fetch_array ($query)) {
            $id = $row['id'];
            $name = $row['name'];
            $username = $row['username'];    

      $output .= '<div><a class="resultItem" data-id="' . $id . '">'   
       . $name . ' '.$username.'</a></div>';   

   }            
 }

 }
echo($output);
?>

** Here is the getItem.php ** **这是getItem.php **

<?php

include '../db/connect6.php';

if(isset($_POST['id'])) {
    $id = intval($_POST['id']);
    $result = mysqli_query("SELECT oz2ts_users.id, oz2ts_users.name,    oz2ts_users.username,  oz2ts_users.email FROM oz2ts_users WHERE oz2ts_users.id =      $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

?>

Answer 1

You are on the right path and although you haven't tried anything yourself, here's something to get you moving along: 您走在正确的道路上，尽管您自己还没有尝试过任何方法，但是有一些方法可以使您继续前进：

You should return something like this and populate your search result list 您应该返回类似这样的内容并填充搜索结果列表

$output .= '<div><a class="resultItem" data-id="' . $id . '">'   
           . $name . ' '.$username.'</a></div>';

Next you need an additional ajax call to populate the bottom info so here's the javascript bit, pay attention to the way the click event is bound to the dynamically created element using the body on construct: 接下来，您需要一个额外的ajax调用来填充底部信息，因此这是javascript，请注意使用构造函数on的body将click事件绑定到动态创建的元素的方式：

$('body').on('click', 'a.resultItem', function(e) {
    e.preventDefault();
    $.ajax({
        url: "getItem.php",
        method: 'post',
        data : $(this).data('id') // see the data attribute we used above in the a tag we constructed
    }).done(function(data) {
        $("#id").html(data.id);
        $("#name").html(data.name);
        $("#email").html(data.email);
        $("#company_name").html(data.company);
    });
});

And now you just need the getItem.php which can be something like this: 现在，您只需要getItem.php ，它可以像这样：

<?php
include '../db/connect6.php';

if(isset($_POST['id'])) {
    $id = intval($_POST['id']);
    $result = mysqli_query("SELECT id,name,email,company FROM yourtable WHERE yourtable.id = $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

搜索结果动态链接

问题描述

1 个解决方案

解决方案1
0 2015-09-30 19:41:05

搜索结果动态链接

问题描述

1 个解决方案

解决方案1 0 2015-09-30 19:41:05

解决方案1
0 2015-09-30 19:41:05