onkeyup函數只能觸發一次

Question

我需要onkeyup多次觸發，但它似乎只能觸發一次！

當我輸入內容的輸入框，它搜索，但後來每當我退格鍵和搜索別的東西，在div住宿是一樣的..

這裏是我的代碼：

<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> 

這裏被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 />'; 
    } 

} 
?> 

ALSO：我想知道怎樣才能把這個名字的回報率，它已經成爲搜索從輸入框，而不是到DIV下拉，所以當我點擊其中一個名稱，它會自動填充輸入框。

謝謝！

Answer 1

發現我的問題。查詢未正確處理！

我有變量$ dam_text爲LIKE語句，當它應該是$壩：

<?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 />'; 
    } 

} 
?> 

此外，變量$大壩並沒有被提交inide的功能，所以我從移動了它'if'聲明，納入函數：

<?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 />'; 
    } 

} 
?> 

上面的代碼完美地工作！事實證明，這不是onkeyup！感謝你的幫助！

Answer 2

OnKeyUp每個事件只會觸發一次。按'A''B'和'C'將導致三個調用建議1（）;

要確保你的瀏覽器是否工作正常試試這個

<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> 

應該可以看到發生在輸入每個按鍵股利變化。

有兩個很多未知數，我可以直接指出你的實際問題。 您的PHP將不輸出任何零條目查詢，並且如果您查詢LIKE只匹配一件事物，則只輸出1個條目。我認爲你的問題在於其他地方，一個不與onkeyup

在您的系統/瀏覽器上的onkeyup的T測試： 嘗試添加一些調試頭像echo strlen($text).'<br />';到您的PHP文件。對於添加或刪除文本（包括退格鍵）的每個按鍵，您都應該看到數字更改，而不依賴於您的SQL查詢。

你的代碼看起來不錯。並運行使用正常，我的公共HTTP在http://ivanzuzak.info/urlecho/

GET echo服務換掉PHP的echo服務工作正常（有位打字延遲）

<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

仍不能確定您的問題每個頁面加載只能觸發一次。如果沒有看到更多的代碼，就很難合理地進行猜測。從來沒有，這裏有一個例子，我把你如何以更有用的方式呈現返回的數據放在一起。

該代碼要求您下載我在前面的評論中提到的AjaxRequest庫。 （http://ajaxtoolbox.com/request/）

在這裏，我演示了一些原則。

1. 的數據排列成一個PHP類
2. 構造此類
3. 的實例返回這個數組作爲JSON
4. 捕捉JSON文本並將它回對象在JS
的陣列
5. 處理數據

我已經給出了2個非常簡單的例子 - 第一個簡單地加載當前目錄中的所有文件名（即hol ds jsonDir.php）轉換爲select元素。選擇文件名會導致它被複制到按鈕旁邊的文本輸入中。

第二，只檢索png文件的名稱。它將它們全部加入到select元素中。然而，這一次，當一個項目被選中時，它被用作圖像的src。在每種情況下，只有在按下相應按鈕時纔會抓取文件名。有一點冗餘/否則蹩腳的代碼我可以做得更好，但20小時清醒後，我準備好睡覺了！

希望這對您有用。任何問題，只要問。 :)

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>