duanpi7107 2015-09-05 18:27
浏览 22

JQuery即时搜索：如何发出第二个帖子请求。 以及如何使用输入键进行搜索

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 create_object.php can't get the variable txt (which has already been post successfully to search.php), any ideas on how to fix it? Q2 I want to create a function that allow the user to be directed 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 then quickly evolves into a messy nightmare.

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 in search.php 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",{createVal: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);

    }

?>
  • 写回答

2条回答 默认 最新

  • douzhan8303 2015-09-05 20:00
    关注

    I am not so much familiar with PHP, so couldn't test the actual scenario. But as far as the javascript code, do check the following at your end:

    Q1: You might have misspelled the function name 'createq' as 'creatq'

        ... <div id=\"create\" onclick=\"creatq() ...
    ..
    ..
    function createq(){
    ..
    }

    Q2 There is a keycode assigned for each key on the keyboard. For enter key, its value is 13. You can get it by use of event.which in any event handler function.
    In this case, it can be get on keyup or keypress of the input field, something like below should do:

    $(document).on('keyup keypress', 'input[name=search]', function(evt) {
    if (evt.which === 13) {
       // find the first search result in DOM and trigger a click event 
       // $("#search_output").find('a').first().trigger('click');


      // OR
      // find the url of the 1st link and use document.location to redirect 
      var redirectUrl = $('#search_output').find('a').first().attr('href');
      document.location = redirectUrl;
    }
});
    评论

报告相同问题？

悬赏问题

  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行