2012-01-12 125 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