Блог

Главная - Вопросы по программированию - Как я могу реализовать этот JS-код в моем HTML и PHP?

Как я могу реализовать этот JS-код в моем HTML и PHP?

#php #javascript #html

#php #javascript #HTML

Вопрос:

Я нашел эту JS-функцию, которая действует как Google instants, путем поиска и отображения только результатов, в названии которых есть поиск 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-код, чтобы они работали вместе?

Я был бы очень благодарен за любые ответы вообще, заранее спасибо!

Комментарии:

1. W3 tuts? Как в w3schools? Если это так, я предлагаю вам медленно отступать от сайта, не делать резких движений и покинуть помещение…

2. да, школы W3, единственная причина, по которой я делаю это сейчас, это то, что я написал эту PHP-программу, которую мне действительно нужно закончить завтра, и одной из вещей, которые я хотел включить, был мгновенный поиск

3. Для начала, у вас на странице загружен jQuery, потому что это код на основе jQuery… не raw JS.

Ответ №1:

Вам нужно будет добавить скрипт на свою страницу, вот так:

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

Помимо этого (и до этого, на странице HTML!), вы должны включить библиотеку jQuery, потому что она используется вашим скриптом. Вы можете загрузить jQuery на свой собственный сервер и связать его там, но вам может быть полезно включить jQuery из Google.

При желании вы можете поместить свой скрипт в отдельный файл и связать его на своей странице. Поскольку вам не нужно заниматься каким-либо реальным программированием на Javascript, я думаю, что кто-то со знанием PHP и html должен иметь возможность включить скрипт на свою страницу.

Ответ №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 /