Question

我希望有人可以帮忙解决这个问题。我有一个基本的autosuggest下拉页面，我想要一个特定的div＆＃34; con＆＃34;如果变量＆＃34; id＆＃34;被隐藏在url（index.php）中没有设置然后显示它是否已设置。这背后的想法类似于Google，因为当用户最初访问index.php时，他们看不到任何结果，因为这些结果显示在＆＃34; con＆＃34;最初隐藏的div。当用户在搜索框中键入然后单击下拉结果时，将显示con div，其中包含基于用户单击的特定结果的动态内容。请您协助，因为当用户进入索引页面时，会立即显示内容，如果有更好的方法可以实现此目的，请告诉我们。我有3个文件index.php; search.php中;和index.js。我遗漏了一个基本的connect.php文件。＆＃34;名称＆＃34;表包含2列 - ＆＃34; id＆＃34;和＆＃34;名称＆＃34;。

的index.php：

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.elastic.js"></script>
<link rel="stylesheet" type="text/css" href="status.css">
<title>Test</title>
<script type="text/javascript">

$(document).ready(function() {

  function getUrlVars()
  {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes.split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }

    return vars;
  }
  var id = getUrlVars()["id"];

  $(".con").hide();

  if($(id!='undefined'));
  {
    $(".con").show();
  }

});

</script>
</head>
<body>
  <h1>Test</h1>

  <div class="c_search">

    <span id='box'>
      <input type ='text' id='search_box' /> <button id="search_botton">Search</button>
    </span>

    <div id='search_result'>
    </div>

    <script src='index.js'></script>
  </div>


  <div class="con">
    Show me/Don't show me
  </div>
</body>
</html>

的search.php：

<?php

include 'connect.php';

// please, be more careful about SQL injection... use some protection at least...
//$value = $_POST['value'];
$value = mysql_real_escape_string($_POST['value']);

$query = mysql_query("SELECT * FROM names where name like '%$value%'");
while($run = mysql_fetch_array($query)){
  $name = $run['name'];
  $id = $run['id'];

  echo '<a href=index.php?id='.$id.'>'.$name.'<br/>';
}

?>

index.js：

$(document).ready(function(){

  var left = $('#box').position().left;
  var top = $('#box').position().top;
  var width = $('#box').width();


  $('#search_result').css('left', left).css('top', top+32).css('width', width);

  $('#search_box').keyup(function(){
    var value = $(this).val();

    if(value != '') {
      $.post('search.php', {value: value}, function(data){
        $('#search_result').html(data);
      });
    }
  });
});

Answer 1

您的JS代码似乎有错误（在getUrlVars函数上）：

function getUrlVars()
{
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?')+1).split('&');

  for(var i = 0; i < hashes.length; i++)
  {
    // you're splitting the entire array, you should split 1 item so hashes[i]
    // hash = hashes.split('=');
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }

  return vars;
}

此外，您还没有关闭标记：echo '<a href=index.php?id='.$id.'>'.$name.'</a><br/>'

在autosuggest下拉项目上显示div，单击

1 个答案: