Fonction onkeyup ne tirant qu'une seule fois

Question

J'ai besoin de l'onkeyup pour tirer plus d'une fois, mais il ne semble que tirer une seule fois!

Quand je rentre quelque chose dans la zone de saisie, il recherche, mais chaque fois que je Backspace et cherche autre chose, le séjour div est le même ..

Voici mon code:

<script type="text/javascript"> 
function suggest1() { 
    var dam_text = document.getElementById('dam').value; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject('MicrosoftXMLHTTP'); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById('myDiv').innerHTML = xmlhttp.responseText; 
     } 
    } 
    var target = 'dam_search.php?dam_text=' + dam_text; 
    xmlhttp.open('GET', target, true); 
    xmlhttp.send(); 
} 
</script> 

<input type="text" name="dam" id="dam" onkeyup="suggest1();"><br /> 
<div id="myDiv"></div> 

ici est dam_search.php

<?php 

//connect to db stuff here 

if (isset($_GET['dam_text'])) { 
    $dam = $_GET['dam_text']; 
    getSuggest($text); 
} 

function getSuggest($text) { 

    $sqlCommand = "SELECT `name` FROM `table1` WHERE `name` LIKE '%$dam_text%'"; 

    $query = mysql_query($sqlCommand); 

    $result_count = mysql_num_rows($query); 

    while ($row = mysql_fetch_assoc($query)) { 
     echo $row['name'].'<br />'; 
    } 

} 
?> 

AUSSI: Je me demande comment je peux mettre le retour du nom est qu'il a recherché dans un menu déroulant dans la zone d'entrée au lieu dans la div, alors quand Je clique sur l'un des noms, il remplit automatiquement la boîte de saisie.

Merci! OnKeyUp ne se déclenche qu'une seule fois par événement.

Answer 1

Trouvé sur mon problème. La requête n'était pas correctement traitée!

J'ai eu la variable dam_text de $ comme l'instruction LIKE, quand il aurait dû $ barrage:

<?php 

//connect to db stuff here 

if (isset($_GET['dam_text'])) { 
    $dam = $_GET['dam_text']; 
    getSuggest($text); 
} 

function getSuggest($text) { 

    $sqlCommand = "SELECT `name` FROM `table1` WHERE `name` LIKE '%$dam_text%'"; 

    $query = mysql_query($sqlCommand); 

    $result_count = mysql_num_rows($query); 

    while ($row = mysql_fetch_assoc($query)) { 
     echo $row['name'].'<br />'; 
    } 

} 
?> 

En outre, la variable barrage $ n'a pas été soumis inide la fonction, donc je l'ai déplacé de l'instruction 'if', dans la fonction:

<?php 

//connect to db stuff here 

if (isset($_GET['dam_text'])) { 
    getSuggest($text); 
} 

function getSuggest($text) { 

    $dam = $_GET['dam_text']; 

    $sqlCommand = "SELECT `name` FROM `table1` WHERE `name` LIKE '%$dam%'"; 

    $query = mysql_query($sqlCommand); 

    $result_count = mysql_num_rows($query); 

    while ($row = mysql_fetch_assoc($query)) { 
     echo $row['name'].'<br />'; 
    } 

} 
?> 

Le code ci-dessus fonctionne parfaitement! Il s'avère que ce n'était pas l'onkeyup après tout! Merci pour votre aide!

Answer 2

appuyer sur 'A' 'B' et 'C' donnera trois appels à suggérer1();

Pour vous assurer que votre navigateur fonctionne correctement Essayez cette

<script type="text/javascript"> 
function suggest1() { 
    document.getElementById('myDiv').innerHTML = document.getElementById('dam').value; 
} 
</script> 
<input type="text" name="dam" id="dam" onkeyup="suggest1();"><br /> 
<div id="myDiv"></div> 

Vous devriez voir le changement div pour chaque combinaison de touches qui se produit dans l'entrée.

Il y a deux inconnues pour pointer directement sur votre problème actuel. Votre PHP ne sortira rien pour une requête d'entrée nulle, et ne produira que 1 élément si vous interrogez LIKE ne correspond qu'à une chose. T test to onkeyup sur votre système/navigateur: Essayez d'ajouter un en-tête de débogage comme echo strlen($text).'<br />'; à votre fichier PHP. Vous devriez voir le changement de nombre sans compter sur votre requête SQL pour chaque touche pressée qui ajoute ou supprime du texte (qui inclut la touche de retour arrière).

Votre code semble correct. Et fonctionne très bien pour moi en utilisant le protocole HTTP publique GET service d'écho à http://ivanzuzak.info/urlecho/

Délestage votre PHP pour le service d'écho fonctionne très bien (avec un peu de retard de frappe)

<script type="text/javascript"> 
function suggest1() { 
    var dam_text = document.getElementById('dam').value; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject('MicrosoftXMLHTTP'); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById('myDiv').innerHTML = xmlhttp.responseText; 
     } 
    } 
    var target = 'http://urlecho.appspot.com/echo?body=' + dam_text; 
    xmlhttp.open('GET', target, true); 
    xmlhttp.send(); 
} 
</script> 

<input type="text" name="dam" id="dam" onkeyup="suggest1();"><br /> 
<div id="myDiv"></div> 

Answer 3

Toujours pas sûr de votre question avec le keyup tirant seulement une fois par chargement de page. C'est très difficile de spéculer raisonnablement sans voir plus de code. Néanmoins, voici un exemple que je viens de jeter sur la façon dont vous pouvez présenter les données renvoyées d'une manière plus utile.

Le code nécessite que vous téléchargiez la bibliothèque AjaxRequest que j'ai mentionnée dans un commentaire précédent. (http://ajaxtoolbox.com/request/)

Ici, je démo quelques principes.

1. Organiser les données dans une classe php
2. construire un tableau d'instances de cette classe
3. retour ce tableau comme JSON
4. attraper le texte JSON et de le remettre dans un objet JS
5. Traitement des données

J'ai donné 2 exemples très simples - le premier charge simplement tous les noms de fichiers dans le répertoire courant ds jsonDir.php) dans un élément select. Le choix d'un nom de fichier entraîne sa copie dans une entrée de texte à côté du bouton.

La seconde, récupère uniquement les noms de fichiers png. Il les met tous dans un élément de sélection aussi. Cette fois cependant, lorsqu'un élément est sélectionné, il est utilisé comme src pour une image. Dans chaque cas, les noms de fichiers ne sont saisis que si/quand le bouton correspondant est enfoncé. Il y a un peu de code redondant/sinon merdique que j'aurais pu faire mieux, mais après 20 heures de réveil, je suis prêt à aller me coucher!

il est utile Espoir pour vous. Des questions, il suffit de demander. :)

1. jsonDir.php

<?php 
class mFile 
{ 
    public $name, $time, $size; 
} 

if (!isset($_GET['wildcard'])) 
    $wildCard = "*.*"; 
else 
    $wildCard = $_GET['wildcard']; 

foreach (glob($wildCard) as $curFilename) 
{ 
    $curFileObj = new mFile; 
    $curFileObj->name = $curFilename; 
    $curFileObj->time = date("d/m/Y - H:i", filectime($curFilename)); 
    $curFileObj->size = filesize($curFilename); 
    $fileArray[] = $curFileObj; 
} 
printf("%s", json_encode($fileArray)); 
?> 

2. readDir.html

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript' src='script/ajaxRequestCompressed.js'></script> 
<script> 
function byId(e){return document.getElementById(e);} 
function newEl(tag){return document.createElement(tag);} 

function myGetAjaxResponseWithCallback(url, target, callbackFunc) 
{ 
    AjaxRequest.get(
    { 
     'url':url, 
     'onSuccess':function(req){ callbackFunc(req.responseText, target); } 
    } 
); 
} 

function getResults1() 
{ 
    var url = "jsonDir.php"; 
    var target = byId('resultsDiv'); 
    myGetAjaxResponseWithCallback(url, target, jsonDataReceived1); 
} 

function getResults2() 
{ 
    var url = "jsonDir.php?wildcard=*.png"; 
    var target = byId('resultsDiv2'); 
    myGetAjaxResponseWithCallback(url, target, jsonDataReceived2); 
} 

function jsonDataReceived1(responseText, targetContainer) 
{ 
    var resultObject = JSON.parse(responseText); 
    targetContainer.innerHTML = ""; 

    var mStr = "There were " + resultObject.length + " records returned" + "<br>"; 
    var mSel = newEl("select"); 

    mSel.addEventListener('change', doAutofill, false); 

    var i, n = resultObject.length; 
    for (i=0; i<n; i++) 
    { 
     var curRecordOption = new Option(resultObject[i].name, i); 
     mSel.appendChild(curRecordOption); 
    } 
    targetContainer.innerHTML = mStr; 
    targetContainer.appendChild(mSel); 
} 

function jsonDataReceived2(responseText, targetContainer) 
{ 
    var resultObject = JSON.parse(responseText); 
    targetContainer.innerHTML = ""; 

    var mSel = newEl("select"); 
    mSel.addEventListener('change', showSelectedImg, false); 

    var i, n = resultObject.length; 
    for (i=0; i<n; i++) 
    { 
     var curRecordOption = new Option(resultObject[i].name, i); 
     mSel.appendChild(curRecordOption); 
    } 
    targetContainer.innerHTML = ''; 
    targetContainer.appendChild(mSel); 
} 


function doAutofill(e) 
{ 
    var curSelIndex = this.value; 
    var curText = this.options[curSelIndex].label; 
    byId('autofillMe').value = curText; 
} 

function showSelectedImg(e) 
{ 
    byId('previewImg').src = this.options[this.value].label; 
} 

</script> 
<style> 
img 
{ 
    border: solid 2px #333; 
} 
</style> 
</head> 
<body> 
    <button onclick='getResults1()'>Get *.* dir listing</button> <input id='autofillMe'/> 
    <div id='resultsDiv'></div> 
    <hr> 
    <button onclick='getResults2()'>Get *.png dir listing</button> <img id='previewImg' width='100' height='100'/> 
    <div id='resultsDiv2'></div> 
</body> 
</html>