AJAX onkeyup event trigger в php-коде

Я новичок в скрипте AJAX и javascript. Я использую AJAX для поиска предложения, когда пользователь вводит первую букву в поле поиска. Но после ввода кода AJAX и javascript я не мог получить какие-либо предложения, выходящие под полем поиска. Интересно, может ли кто-нибудь помочь мне решить эту проблему?AJAX onkeyup event trigger в php-коде

Кстати, я надеюсь, что предел предложения будет 5. Как я могу это сделать?

Код для index.php:

<html> 
    <head> 
     <title> 
      Brandon's Search Engine 
     </title> 
     <style type="text/css"> 
      #suggestion { 
       border: 1px solid black; 
       visibility: hidden; 
      } 
      #suggestion a { 
       font-size: 12pt; 
       color: black; 
       text-decoration: none; 
       display: block; 
       width: 450px; 
       height: auto; 
      } 
      #suggestion a:hover { 
       background-color: #dddddd; 
      } 
     </style> 
    </head> 
    <script type="text/javascript"> 
     function getSuggestion(q) { 
      var ajax; 
      if(window.XMLHttpRequest)//for ie7+, FF, Chrome 
       ajax = new XMLHttpRequest();//ajax object 
      else 
       ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous 
      ajax.onreadystatechange = function { 
       if(ajax.status == 200 && ajax.readyState == 4) { 
        document.getElementById("suggestion").innerHTML = ajax.responseText; 
       } 
      } 
      ajax.open("GET", "suggestion.php?q=$query" + q, false); 
      ajax.send(); 
     } 
    </script> 
    <body> 
     <form method="GET" action="search.php"> 
      <input type="hidden" name="page" value="0" /> 
      <table align="center"> 
       <tr> 
        <td> 
         <h1><center>Brandon's Search Engine</center></h1> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <input type="text" name="q" size="90" 
           onkeyup="getSuggestion(q)" autocomplete="off" /> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <input type="submit" value="Search" /> 
         <input type="reset" value="Clear" /> 
        </td> 
       </tr> 
      </table> 
     </form> 
     <div id="suggestion" size="90"> 
     </div> 
    </body> 
</html>

Код для suggestion.php:

<?php 
include 'connect.php'; //connect with database 
$query = $_GET["q"]; 
if($query != "") 
{ 
$stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . mysqli_real_escape_string($con,$query) . "%' OR link LIKE '%" . mysqli_real_escape_string($con,$query) . "%' LIMIT 0 , 10"; 
$result = mysqli_query($con,$stmt) or die(mysqli_error($con)); 
$number_of_result = mysqli_num_rows($result); 
if ($number_of_result < 1) { 
    echo "Your search did not match any documents. Please try different keywords."; 
} else { 
    //results found here and display them 
    while ($row = mysqli_fetch_assoc($result))//show first 10 results 
     $title = $row["title"]; 
     $link = $row["link"]; 
     echo "<div id='sugg-search-result'>"; 
     echo "<a href='$link' id='sugg-title'>" . $title . "</a>"; 
     echo "</div>"; 
    } 
} 
?>

Спасибо заранее.

источник

2013-12-06 Bartedecout

Пуск путем изменения 'onreadystatechange = функция {' 'к onreadystatechange = функция() {'. Также в '' suggestion.php? Q = $ query "', '$ query' будет значение' $ _GET ['q'] '. – PHPglue

В функции 'getSuggestion (q) {' 'q' становится объектом события, когда вы назначаете его' onkeyup = '. – PHPglue

Что вы подразумеваете под 'Also in 'suggestion.php? Q = $ query?, $ Query будет $ _GET [' q '] value' и' In function getSuggestion (q) {q становится объектом события, когда вы назначаете его onkeyup = .'. Что мне делать? – Bartedecout

Ваш недостающий разделитель php здесь.

Изменить это:

ajax.open("GET", "suggestion.php?q=$query" + q, false);

To:

ajax.open("GET", "suggestion.php?q=<?php echo $query;?>"+q, false);

Обновленный ответ:

В функции keyup параметр ваше прохождение неправильно.

<input type="text" name="q" size="90" onkeyup="getSuggestion(q)" autocomplete="off" />

Вместо передать значение того, что было прописано:

<input type="text" name="q" size="90" onkeyup="getSuggestion(this.value)" autocomplete="off" />

Изменить это:

ajax.open("GET", "suggestion.php?q=$query" + q, false);

To:

ajax.open("GET", "suggestion.php?q="+q, false);

JQuery Ajax:

function getSuggestion(q){ 
$.ajax({ 
    type: "GET", 
    url: "suggestion.php", 
    data: {item:q}, 
    success:function(data){ 
    alert(data); 
    $("#suggestion").html(data); 
    } 
    }); 

}

suggestion.php:

$value = $_GET['item']; 

// enter the query here and echo the results

Примечание: Не забудьте включить библиотеку JQuery.

источник

2013-12-06 03:17:58

Кроме этого, у меня есть больше ошибок в моем коде. Предложение все еще не появляется. – Bartedecout

Проверьте мой обновленный ответ .. –

Список предложений по-прежнему не может появиться после изменения. Почему мне нужно поставить «this.value» вместо «q»? – Bartedecout

Давайте начнем с этого:

// some common external JavaScript - learn now - common.js 
//<![CDATA[ 
var doc = document, bod = doc.body; 
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]); 
bod.className = 'js'; 
function E(e){ 
    return doc.getElementById(e); 
} 
//]]> 

// this page external JavaScript - thispage.js 
//<![CDATA[ 
var q = E(q); 
function getSuggestion(){ 
    var xhr = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP'); 
    xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200){ 
     E('suggestion').innerHTML = xhr.responseText; 
    } 
    } 
    xhr.open('GET', 'suggestion.php?q='+q.value, false); 
    xhr.send(); 
} 
q.onkeyup = getSuggestion; 
//]]>

Теперь ваш HTML:

<!DOCTYPE html> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
    <head> 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
    <title> 
     Brandon&#039;s Search Engine 
    </title> 
    <style type='text/css'> 
     @import 'external.css'; 
    </style> 
    </head> 
<body class='njs'> 
    <form method='GET' action='search.php'> 
    <input type='hidden' name='page' value='0' /> 
    <table align='center'> 
     <tr> 
     <td> 
      <h1><center>Brandon&#039;s Search Engine</center></h1> 
     </td> 
     </tr> 
     <tr> 
     <td align="center"> 
      <input type='text' name='q' id='q' maxlength='90' autocomplete='off' /> 
     </td> 
     </tr> 
     <tr> 
     <td align='center'> 
      <input type='submit' value='Search' /> 
      <input type='reset' value='Clear' /> 
     </td> 
     </tr> 
    </table> 
    </form> 
    <div id='suggestion'></div> 
    <script type='text/javascript' src='common.js'></script> 
    <script type='text/javascript' src='thispage.js'></script> 
</body> 
</html>

источник

2013-12-06 03:52:34 PHPglue

AJAX onkeyup event trigger в php-коде

ответ

Смежные вопросы