GET函数在自动完成搜索脚本中不起作用

时间:2014-03-01 22:11:15

标签: php jquery mysql ajax

我有这个问题,我想将1个搜索结果传递给另一个,我用它来传递给search.php,最后我得到类别和子类别与自动完成搜索,一切正常,当我把固定$父母,但当我想使用它得到它不起作用

的index.php:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function()
  {
    $(".search").keyup(function()
    {
      var searchid = $(this).val();
      var dataString = 'search='+ searchid;
      if(searchid!='')
      {
        $.ajax(
        {
          type: "POST",
          url: "search.php",
          data: dataString,
          cache: false,
          success: function(html)
          {
            $("#result").html(html).show();
          }
        });
      }
      return false;
    });
    jQuery("#result").live("click",function(e)
    {
      var $clicked = $(e.target);
      var $name = $clicked.find('.name').html();
      var decoded = $("<div/>").html($name).text();
      $('#searchid').val(decoded);
    });
    jQuery("#result").live("click", function(e)
    {
      var $clicked = $(e.target);
      if (! $clicked.hasClass("search"))
      {
        jQuery("#result").fadeOut();
      }
    });
    $('#searchid').click(function()
    {
      jQuery("#result").fadeIn();
    });
    $("#result").send(function()
    {
        $.get('search.php?result=' + $(this).val();)
    });
  });
</script>

<script type="text/javascript">
  $(function()
  {
    $(".search1").keyup(function()
      {
      var searchid1 = $(this).val();
      var dataString = 'search1='+ searchid1;
      if(searchid1!='')
      {
        $.ajax(
        {
          type: "POST",
          url: "search.php",
          data: dataString,
          cache: false,
          success: function(html)
          {
            $("#result1").html(html).show();
          }
        });
      }
      return false;
    });

    jQuery("#result1").live("click",function(e)
    {
      var $clicked = $(e.target);
      var $name = $clicked.find('.name').html();
      var decoded = $("<div/>").html($name).text();
      $('#searchid1').val(decoded);
    });
    jQuery("#result1").live("click", function(e)
    {
      var $clicked = $(e.target);
      if (! $clicked.hasClass("search1"))
      {
        jQuery("#result1").fadeOut();
      }
    });
    $('#searchid1').click(function()
    {
      jQuery("#result1").fadeIn();
    });
  });
</script>

<div class="content">
<input type="text" class="search" id="searchid" placeholder="e.g." />&nbsp; &nbsp;<br /> 
<div id="result">
</div>
</div>
<b>Channel's name:</b>
        <div class="content1">
<input type="text" class="search1" id="searchid1" placeholder="e.g." />&nbsp; &nbsp; <br /> 
<div id="result1">
</div>
</div>

的search.php:

   <?php
include('db.php');
if (isset($_POST['search'])){
$pp=$_POST['search'];
$sql_rest=mysql_query("SELECT TABLE_SCHEMA, TABLE_NAME FROM information_schema.tables WHERE TABLE_SCHEMA = 'xdd' AND TABLE_NAME LIKE '%$pp%' LIMIT 5");
while($row=mysql_fetch_array($sql_rest))
{
$country=$row['TABLE_NAME'];
$b_country='<strong>'.$pp.'</strong>';

$final_country = str_ireplace($pp, $b_country, $country);

?>
<div class="show" align="left">
<span class="name"><?php echo "$final_country"; ?><br/>
</div>
<?php
}

}
if (isset($_POST['search1'], $_GET['result'])){
$parent = $_GET['result'];
$database = mysql_select_db('plavo_channels') or die(mysql_error());
$q=$_POST['search1'];
$sql_res=mysql_query("SELECT chann FROM $parent WHERE chann LIKE '%$q%' LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['channel'];

$b_username='<strong>'.$q.'</strong>';

$final_username = str_ireplace($q, $b_username, $username);

?>
<div class="show" align="left">
<span class="name"><?php echo $final_username; ?><br/>
</div>
<?php

}}
?>

我通常不做ajax和jquery tnx all

1 个答案:

答案 0 :(得分:0)

输入将是这样的

<form action method="POST">
  <input type="text" id="first" />
  <input type="text" id="second" list="list1"/>
  <input type="text" id="third" list="list2"/>
</form>

并将在末尾添加到html页面

<datalist id="list1">
</datalist>
<datalist id="list2">
</datalist>

javascript会是这样的

$(document).ready( function(){
    $("#first").keyup(function(){
        first=$("#first");
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","autocomplete.php?first="+first,false);
        xmlhttp.send();
        document.getElementById("list1").innerHTML=xmlhttp.responseText;    
    });
    $("#second").keyup(function(){
        first=$("#first");
        first=$("#second");
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","autocomplete.php?first="+first+"&second="+second,false);
        xmlhttp.send();
        document.getElementById("list2").innerHTML=xmlhttp.responseText;    
    });
});

autocomplete.php将是

<?php
if($_GET['first']&&$_GET['second'])
{
    // here list2
    echo"<option>option1</option>";
    echo"<option>option2</option>";
}
if($_GET['first'])
{
    //here list1
    echo"<option>option3</option>";
    echo"<option>option4</option>";
}
?>

但是您将更改选项来自数据库