2012-01-12 120 views
0

我正在使用jQuery在文本字段上執行自動完成。基於用戶從該自動完成點擊我想調用另一個功能,執行ajax請求。這怎麼可能accomplished.Here是第一自動完成功能:從另一個Ajax調用Ajax

function lookup(inputString) { 
    if(inputString.length == 0) { 
     // Hide the suggestion box. 
     $('#suggestions').hide(); 
    } else { 
     $.post("ajax/autocomplete.php", {queryString: ""+inputString+""}, function(data){ 
      if(data.length >0) { 
       $('#suggestions').show(); 
       $('#autoSuggestionsList').html(data); 
      } 
     }); 
    } 
} // lookup 

function fill(thisValue) { 
    $('#inputString').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 200); 
} 

和第二AJAX調用:

function showCar(str) 
{ 
if (str=="") 
{ 
document.getElementById("inputString").innerHTML=""; 
return; 
} 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("carchoice").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","ajax/getcar.php?q="+str,true); 
xmlhttp.send(); 
} 

,並從表格給函數的初始呼叫:

<input type="text" size="50" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();"/> 
<div class="suggestionsBox" id="suggestions" style="display: none;"> 
      <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
      <div class="suggestionList" id="autoSuggestionsList"> 
       &nbsp; 
      </div> 
+2

爲什麼你爲一個AJAX調用使用jQuery,而另一個使用本地XMLHTTP? – 2012-01-12 18:17:08

+0

嗯..我只是重新寫這個爛攤子,你有jQuery .post()&然後非jQuery ajax調用?看起來你只是複製和粘貼而不去思考。 – Jakub 2012-01-12 18:17:22

+0

我不知道? :)我只知道如何做基於另一個例子的jQuery自動完成,並且幾乎沒有jQuery的ajax功能經驗 – savagenoob 2012-01-12 18:19:06

回答

2

您可以使用以下這幾行代碼進行調用:

$('#autoSuggestionsList').children('div').click(function() { 
    showCar(this.innerHTML); 
}); 

當然,在你把每個結果在一個新的div情況是孩子#autoSuggestionsList

<div class="suggestionList" id="autoSuggestionsList"> 
    <div>First result</div> 
    <div>Second result</div>     
</div> 

而且小提琴:http://jsfiddle.net/NaYzm/

最好的問候!

+0

謝謝,建設性的幫助! – savagenoob 2012-01-12 18:25:21

+0

不客氣:-) – 2012-01-12 18:25:45

+1

我真的會重寫javascript tho ...至少讓所有的jQuery代替'showCar()'的東西。 – Jakub 2012-01-12 18:39:28