Question

我发现这个JS功能就像谷歌时刻一样，通过搜索并只显示在他们的按钮DIV标题中搜索的结果。

JS代码是：

$(function() { 
  var theTable = $('table.food_planner')

  theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){
    $(this).prev().find(":checkbox").click()
  });

  $("#filter").keyup(function() {
    $.uiTableFilter( theTable, this.value );
  })

  $('#filter-form').submit(function(){
    theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
    return false;
  }).focus(); //Give focus to input field
});

我的HTML表单如下所示：

<body>
  <div class="main">
    <form method="get" action="quiz.php" id="form">

      <p class="subFont">Search Quizzes</p>
      <input type="text" id="search" name="search"/><br>

      <button type="submit[]" class="quizBlock" name="button"  id="quizID" action="quiz.php" method="get" value="<?php echo $quiz[$i]['ID']?>">
        <p><?php echo $quiz[$i]['Name']?></p>
      </button>

   </form>
  </div>
</body>

这个表单还有一些，还有一些PHP。 PHP使用for循环并打印出有多少数据按钮，每个按钮都有不同的值，以及需要搜索的不同内容。

我知道一些基本的PHP和HTML，但几乎没有JS，我在W3 tuts的一半：p

如何更改我的HTML和JS代码以便它们一起工作？

我会非常感谢任何答案，提前谢谢！

Answer 1

您需要将脚本添加到页面中，如下所示：

<script type="text/javascript">
  // Your script goes here
</script>

除此之外（在此之前，在HTML页面中！），您应该包含JQuery库，因为它由您的脚本使用。您可以将JQuery下载到您自己的服务器并将其链接到那里，但您可以从including JQuery from Google中受益。

或者，您可以将脚本放在单独的文件中，并将其链接到您的页面中。由于您不必进行任何实际的Javascript编程，我认为具有PHP 和 html知识的人应该能够在其页面中包含脚本。

Answer 2

如果您要查询服务器以获取信息并立即显示在页面上，您应该使用基于AJAX（异步Javascript和XML请求）的方法。以下是如何实现此目的的简单示例。您应该知道，这是一个简单的示例，旨在说明其工作原理，但不一定是最佳实践的示例。

html标记可能类似于以下内容：

<html>
    <head>
        <title>Instant Search</title>
        <script type=”text/javascript” src=”../jquery.js”></script>
        <script type="text/javascript">
            var runningRequest = false;
            var request;

            //Identify the typing action
            $('input#q').keyup(function(e){
                e.preventDefault();
                var $q = $(this);

                if($q.val() == ''){
                    $('div#results').html('');
                    return false;
                }

                //Abort opened requests to speed it up
                if(runningRequest){
                    request.abort();
                }

                runningRequest=true;
                request = $.getJSON('search.php',{
                    q:$q.val()
                },function(data){           
                   showResults(data,$q.val());
                   runningRequest=false;
                });

                //Create HTML structure for the results and insert it on the result div
                function showResults(data, highlight){
                    var resultHtml = '';
                    $.each(data, function(i,item){
                    resultHtml+='<div class="result">';
                    resultHtml+='<h2><a href="#">'+item.title+'</a></h2>';
                    resultHtml+='<p>'+item.post.replace(highlight, '<span class="highlight">'+highlight+'</span>')+'</p>';
                    resultHtml+='<a href="#" class="readMore">Read more..</a>'
                    resultHtml+='</div>';
                });

                $('div#results').html(resultHtml);
            }

            $('form').submit(function(e){
                e.preventDefault();
            });
        });
    </script>
    </head>
    <body>

        //Form
        <form method=”get” action=”">
            <input type=”text” id=”q” name=”q” />
            <input type=”submit” value=”Search” />
        </form>

       //Result’s Container
       <div id=”results”></div>

    </body>
</html>

css：

  form{
      margin:15px;
      padding:5px;
      border-bottom:1px solid #ddd;
  }

  form input[type=submit]{display:none;}

  div#results{
      padding:10px 0px 0px 15px;
  }

  div#results div.result{
      padding:10px 0px;
      margin:10px 0px 10px;
  }

  div#results div.result a.readMore{color:green;}

  div#results div.result h2{
      font-size:19px;
      margin:0px 0px 5px;
      padding:0px;
      color:#1111CC;
      font-weight:normal;
  }

  div#results div.result h2 a{
      text-decoration:none;
      border-bottom:1px solid #1111cc;
  }

  div#results div.result p{
      margin:0;
      padding:0;
  }

  span.highlight{
      background:#FCFFA3;
      padding:3px;
      font-weight:bold;
  }

PHP服务器端代码：

<?php if(!empty($_GET['q'])) {
    search();
}

function search() {
    $con = mysql_connect('localhost','root', '');
    mysql_select_db('mydb', $con);

    $q = mysql_real_escape_string($_GET['q'], $con);
    $sql = mysql_query("
        SELECT
        p.title, SUBSTR(p.post,1,300) as post
        FROM Posts p
        WHERE p.title LIKE '%{$q}%' OR p.post LIKE '%{$q}%'
    ");

    //Create an array with the results
    $results=array();
    while($v = mysql_fetch_object($sql)){
        $results[] = array(
            'title'=>$v->title,
            'post'=>$v->post
        );
    }

    //using JSON to encode the array
    echo json_encode($results);
}

原始来源：http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/

如何在我的HTML和PHP中实现这个JS代码？

2 个答案: