2015-09-06 43 views
0

我创建了一个类似于谷歌搜索使用JQuery的即时搜索。突出显示的代码不起作用。这是奇怪的,因为他们自己的工作很好,其他一切正常工作。任何想法为什么发生这种情况? Q1。 searchq()工作正常,但createq()函数不起作用,变量txt可以发布到其他文件(search.php)。但是,函数createq()不能POST。它在测试后得到了全局变量txt,但是无论使用什么POST方法,php文件(create_object.php)都无法得到它。任何人都可以帮助写一些可以在我的代码中工作的POST代码。Javascript两个奇怪的问题:POST不工作,window.location.href不工作

Q2 我想创建一个函数,当按下回车键时,用户将被重定向到第一个搜索结果(用一个url来锚定)。为了达到这个目的,我创建了一个函数,让变量redirectUrl将锚定的url作为字符串获取,但是,重定向函数window.location.href不起作用,页面只是刷新了。我通过自己在另一个文件中测试了window.location.href函数,它虽然工作。这很奇怪,我的网页只是刷新,它甚至刷新,当我直接到谷歌。 window.location.href( “www.google.com”)。

请注意,我没有在这里包括连接到数据库功能。因为我认为数据库的用户名和密码设置与您的不同,所以如果您想测试它,请自行创建。 mysql被设置为一个名为“objects”的表,并且它有一个名为“name”的列。

在此先感谢!

<html> 
    <!-- google API reference --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <!-- my own script for search function --> 

    <center> 
    <form method="POST"> 
     <input type="text" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();"> 
     <div id="output"> 
     </div> 
    </form> 
    </center> 

     <!-- instant search function --> 
<script type="text/javascript"> 

function searchq(){ 
     // get the value 
      var txt = $("input").val(); 
      // post the value 
      if(txt){ 
       $.post("search.php", {searchVal: txt}, function(result){ 
        $("#search_output").html(result+"<div id=\"create\" onclick=\"creatq()\"><br>Not found above? Create.</div>"); 
       }); 
      } 
      else{ 
       $("#search_output").html(""); 
      } 


     }; 
function createq(){ 
    // allert for test purpose: test if the txt has got by the createq function 
    alert(txt); 
    **$.post("create_object.php",{creatVal:txt});** 

} 

// if enter key pressed, redirect page to the first search result 
$("#search").keypress(function(evt){ 
    if (evt.which == 13) { 
     // find the first search result in DOM and trigger a click event 
     var redirectUrl = $('#search_output').find('a').first().attr('href'); 
     alert(redirectUrl); 
     **window.location.href = "www.google.com"; 
window.location.href = "www.google.com";** 
    } 
}) 

</script> 
    </html> 

PHP文件(的search.php)

<?php 
if(isset($_POST["searchVal"])){ 
    //get the search 
    $search=$_POST["searchVal"]; 
    //sort the search 
    $search=preg_replace("#[^0-9a-z]#i","",$search); 
    //query the search 
    echo "<br/>SELECT * from objects WHERE name LIKE '%$search%'<br/>"; 
    $query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!"); 
    $count=mysqli_num_rows($query); 
    //sort the result 
    if($count==0){ 
     $output="there was no search result"; 
    } 
    else{ 
     while($row=mysqli_fetch_assoc($query)){ 

      $object_name=$row["name"]; 

      $output.="<div><a href='##'>".$object_name."</a></div>"; 
     } 
    } 
    echo $output; 
} 
?> 

php文件(create_object。PHP)

<?php 
    if(isset($_POST["createVal"])){ 
     $name=$_POST["createVal"]; 
     var_dump($name); 

    } 

?> 
+0

你应该分开这两个问题分成两个不同的职位。他们不太相关,回答问题的人不会得到完全的批准,这会使人们回避你的问题。只是一个友好的领导。 'creatq()'工作的 – OneRaynyDay

+0

,看看http://api.jquery.com/on/ –

回答

0

尝试将输入与ID绑定

var txt = $("input").val(); 

<input type="text" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();"> 

更改上面这个

var txt = $("#searchinput").val(); 

<input type="text" id="searchinput" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();"> 

,我认为你正试图在这里展示搜索结果

<div id="output"></div> 

和jQuery绑定是th在代码

$("#search_output").html(""); 

的HTML所以改变这种

<div id="search_output"></div> 

也该在我们的代码

$("#search").keypress(function(evt){ 

没有HTML元素绑定吧,我想你想将其与搜索输入进行绑定,以便将其更改为此

$("#searchinput").keypress(function(evt){ 

以上更改也应解决window.location.href not working问题

因此,HTML将是;

<form method="POST"> 
    <input type="text" id="searchinput" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();"> 
    <div id="search_output"></div> 
</form> 

和脚本将被

<script type="text/javascript"> 
function searchq(){ 
    // get the value 
    var txt = $("#searchinput").val(); 
    // post the value 
    if(txt){ 
     $.post("search.php", {searchVal: txt}, function(result){ 
      $("#search_output").html(result+"<div id=\"create\" onclick=\"creatq()\"><br>Not found above? Create.</div>"); 
     }); 
    } 
    else{ 
     $("#search_output").html(""); 
    } 
} 

function createq(){ 
// allert for test purpose: test if the txt has got by the createq function 
    alert(txt); 
    **$.post("create_object.php",{creatVal:txt});** 
} 

// if enter key pressed, redirect page to the first search result 
$("#searchinput").keypress(function(evt){ 
     if (evt.which == 13) { 
     // find the first search result in DOM and trigger a click event 
     var redirectUrl = $('#search_output').find('a').first().attr('href'); 
     alert(redirectUrl); 
     **window.location.href = "www.google.com"; 
     window.location.href = "www.google.com";** 
    } 
}); 
</script> 

注:如果您检查浏览器控制台,您可能会看到一些错误,还有一些错误,错字缺少像你的JS ;了。

在PHP中,这里

if($count==0){ 
    $output="there was no search result"; 
} 
else{ 
    while($row=mysqli_fetch_assoc($query)){ 
     $object_name=$row["name"]; 
     $output.="<div><a href='##'>".$object_name."</a></div>"; 
    } 
} 

$output.是错的点,所以将其更改为以下

if($count==0){ 
    $output="there was no search result"; 
} 
else{ 
    while($row=mysqli_fetch_assoc($query)){ 
     $object_name=$row["name"]; 
     $output="<div><a href='#'>".$object_name."</a></div>"; 
    } 
} 
0

两件事情:

  1. 输入搜索ID没有被定义,$(“#search”).presspress将不起作用。更改为:

    <输入类型= “文本” 名称= “搜索” ID = “搜索”风格= “宽度:400像素” 占位符= “搜索框” 的onkeyup = “SEARCHQ();” >

  2. Div id“output”,应该是“search_output”,如$(“#search_output”)中所要求的那样。更改为:

    < DIV ID = “search_output”> </DIV>