douzhangcuo2174 2015-09-05 19:58
浏览 61

JQuery:将变量发布到第二个文件,当按下回车键时,Web会将我引导到第一个搜索结果页面

I created an instant search similar to google search using JQuery.

Q1. The post to search.php using search function searchq() then print out the returned result works fine, but the createq() function doesn't work at all, it didn't triggered when I using alert() to test, any ideas on how to fix it so the variable txt could be post to create_object.php (which has been post successfully to search.php).

Q2 I want to create a function that allow the user to direct to the first search result(which is anchored with an url) when the enter is pressed, any idea how to achieve this? I tried something but it messed up.

Note that I didn't include the connect to database function here. Coz I think the database username and password setting would be different to yours.So please create your own if you want to test it. The mysql is set with a table is called "objects", and it has one column named "name".

Thanks in advance!

 <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();">
        <input type="submit" value=">>">
        <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
    alert("hi");
    $.post( "create_object.php",{creatVal:txt} );

}

</script>
    </html>

PHP file (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 file (create_object.php)

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

    }

?>
  • 写回答

1条回答 默认 最新

  • dt20081409 2015-09-06 01:08
    关注

    Two questions in one!

    Q1: The problem appears to be a misspelling in the onclick function:

    onclick=\"creatq()\"
    

    should be

    onclick=\"createq()\"
    

    Q2: Pressing enter will submit the form, so you use the submit handler to catch the enter press then redirect:

    $(function() { //shorthand document.ready function
        $('form ').on('submit', function(e) { //use on if jQuery 1.7+
            e.preventDefault();  //prevent form from submitting
            $url = $('#search_output div:first a').attr('href'); // find first link
            window.location.href = $url; // redirect
        });
    });
    

    (credit to this answer for most of the work)

    评论

报告相同问题?

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf(“\b \b”)与getch()实现黑框里写入与删除?
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题,求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
  • ¥15 有了解d3和topogram.js库的吗?有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看