模仿谷歌的AJAX和PHP

我想模仿谷歌用下面的代碼，這意味着提示提示：模仿谷歌的AJAX和PHP

第1步：當用戶在搜索框中，查詢字符串將通過服務器php文件處理，查詢建議字符串被返回（使用Ajax對象）。

第2步：當用戶點擊查詢建議時，它將填入搜索框（自動完成）。

第1步是在第2步沒有完成的情況下完成的。我認爲問題在於.click（）方法（稍後我使用.live（），但它仍然不起作用）。我的意圖是使用.live（）或.click（）將onclick事件綁定到動態創建的<li>元素。任何想法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script src="jquery-1.4.2.js"> 
</script> 

<style> 
#search,#suggest,ul,li{margin: 0; padding:0; width: 200px;} 
ul{ list-style-type: none;} 
.border{border: solid red 1px; } 
</style> 

<p>My first language is:</p> 
<input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" /> 
<ul id="suggest"></ul> 

<script type="text/javascript"> 
$(function main(str) 
{ //binding any forthcoming li element click event to a function 
$('li').live('click', function(){ $("#search").val(array[i]);}); 
    //setup Ajax object 
    var request=new XMLHttpRequest(); 
    request.open("GET","language.php?q="+str,true) 
    //core function 
    request.onreadystatechange=function() 
    {  
    if (request.readyState==4 && request.status==200) 
     { if (str=="") {$('li').remove(); $('ul').removeClass('border');return;} 
     $('li').remove(); 
     reply=request.responseText.split(","); 
     for (i=0;i<reply.length;i++) 
     { 
      //create HTML element of <li> 
     $('#suggest').append($('<li>',{id: 'li'+i, html: reply[i]})); 
     //style ul 
     $('ul').addClass('border'); 
       }  
     } 
    } 
    request.send(); 
}) 
</script>

PHP：

<?php 
$q=$_GET[q]; 

$a[]='english'; 
$a[]='chinese'; 
$a[]='japanese'; 
$a[]='eeeeee'; 

//lookup all hints from array if length of q>0 
if (strlen($q) > 0) 
{ 
    $hint=""; 
    for($i=0; $i<count($a); $i++) 
    { 
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) 
    { 
     if ($hint=="") 
     { 
     $hint=$a[$i]; 
     } 
     else 
     { 
     $hint=$hint." , ".$a[$i]; 
     } 
    } 
    } 
} 

// Set output to "no suggestion" if no hint were found 
// or to the correct values 
if ($hint == "") 
{ 
    $response="no suggestion"; 
} 
else 
{ 
    $response=$hint; 
} 

//output the response 
echo $response; 
?>

來源

2010-06-06 Philip007

您正在尋找的jQuery Autocomplete。

來源

2010-06-06 14:40:44

謝謝，我正在調查它。但我仍然想知道我的代碼中出了什麼問題。 – Philip007 2010-06-06 14:46:13

另請參見[jQuery UI項目中的一個]（http://jqueryui.com/demos/autocomplete/） – Nathan 2010-06-07 22:41:56

-1

如果您希望您的應用程序正常工作，則還應考慮緩存響應，例如在退格的情況下。

來源

2010-06-06 14:42:28 Rob

你是正確的問題是哪一行。您錯過了#以便通過ID進行搜索。

$('li'+i).click(function(){ $("#search").html(array[i]);});

應該

$('#li'+i).click(function(){ $("#search").html(array[i]);});

有更清潔的方式來做到這一點，但是，不需要的文件重新查詢附上這個處理程序。我完全同意使用插件的建議。

來源

2010-06-06 15:05:36 x1a4

感謝您指出這一點。 – Philip007 2010-06-07 06:22:12

我經歷了您的代碼，並且其中幾個問題。 1）如果你想在動態創建的元素上綁定點擊事件，那麼你應該使用.live（'click'，function（）{}）事件綁定器。這個jQuery函數將綁定選擇器上的click事件，這個選擇器將在代碼中動態創建，所以如果你在文檔就緒函數中寫入live（）事件，來自服務器的元素將自動綁定到click事件。閱讀docs。

下面是示例代碼

<script> 
$(function(){ 
$("#suggest li").live('click', function(){ 
$("#search").val($(this).text()); // li inner html contains text that needs to put into search box 
    alert($(this).text()); // or alert(array[i]); in your code 
    //c what is the out put of above code. better if you change name of an array 
}); 
}); 
</script>

另外文本輸入元素的值在代碼中使用.VAL（）函數來代替。html的功能的取$("#search").html(array[i]);

問候阿亞茲阿拉維

來源

2010-06-06 15:10:30

我像你說的那樣修改了腳本。但它仍然無法正常工作。2）將.html（）更改爲.val（） 3）將.click更改爲.live（'click'，函數。）1）將（'li'+ i）更改爲（'＃li'+ i） 3） ..）腳本中一定有其他的錯誤。這與關閉有關嗎？關於嵌套函數的問題？ – Philip007 2010-06-07 06:27:02

老兄，你只需要在載入函數的文件上寫實時點擊函數一次，而不是每次你做ajax。如果你這樣做了，那麼以後插入到#suggest ul中的每一個li都將自動綁定點擊事件。當你點擊一個li然後提醒array [i]的值來查看你插入到輸入（c我上面編輯的代碼）中的array [i]的值是多少。最好是將數組的名稱更改爲其他名稱，因爲它也是Javascript使用的關鍵字。 – 2010-06-07 07:31:01

也通過firebug看到ajax響應，看看服務器是否正確響應。你的功能層次也很好。我不認爲函數調用有任何問題，但確保通過alert或console.log（str）語句觸發keyup事件。 – 2010-06-07 07:41:38

另外，您可能希望等待用戶閒置。這可以防止太多的往返行程。這將意味着寫如下：

$("input").keyUp(function(e) { 
    clearTimeout(updater); 
    updater = setTimeout(whenReady, 200); 
} 

function whenReady() { 
    // update the search box here... 
}

來源

2010-06-06 15:13:27 Tim

好想法。但我仍在努力讓腳本啓動並運行。我正在將性能問題放在日後。 – Philip007 2010-06-07 06:34:05

模仿谷歌的AJAX和PHP

回答

相關問題