jquery - 建议文本字段，如 - 谷歌建议 - 使用 AJAX/Jquery

Question

当我在文本字段中输入字母时，如果它在数据库中有匹配项，它应该显示所有匹配的单词。当我在 Travelfrom 文本字段中输入一些文本(例如:A)时，我应该获取以 A 开头的所有记录当我输入 Travelfrom(文本字段)时，它会自动完成它，它应该像谷歌建议一样。如何在 AJAX 中做到这一点。

现在:我从数据库中检索 Travelfrom 数据。现在，当我在 tripfrom 文本字段中输入第一个字母时，它应该检查其是否相等，显示匹配记录的列表。

我已经编写了自动完成建议文本框的 Jquery/Ajax 代码，并将文本字段值从 AJAX 传递到 java，以检查条件。请让我知道如何检查状况并发回显示建议框。请帮助我。

function getAutoSuggestionData(){
alert("calling ajax method getAutoSuggestionData()");

$(document).ready(function(){

$('#t02Travelfrom').keyup(function(e){
alert("1");


var t02Travelfrom=$("#<portlet:namespace />t02Travelfrom").val(); 

alert("Value of t02Travelfrom-->"+t02Travelfrom);

var autodataString = 'function=Getautodatafield'+'&t02Travelfrom='+ t02Travelfrom;
alert("after autodataString");
alert("value of autodataString"+autodataString);

if(t02Travelfrom!=0)
{
$.ajax({

url: "${getTravelDataAutoUrl}",
data: autodataString,
cache: false,
success: function(html)
{ 
alert("success");
}
}); return false; 
}else
{

}

}); 
});
}

TravelDetails.java

public void GetAutoSuggestionData(ResourceRequest request, ResourceResponse response) throws SystemException {

System.out.println("********inside GetAutoSuggestionData()********");
String tfromstatic =request.getParameter("t02Travelfromdyn");

int count = EMP_TRAVEL_DETAILSLocalServiceUtil.getEMP_TRAVEL_DETAILSsCount();
List <EMP_TRAVEL_DETAILS> travelDetailLists = EMP_TRAVEL_DETAILSLocalServiceUtil.getEMP_TRAVEL_DETAILSs(0, count);

String t02Travelfrom;

for(EMP_TRAVEL_DETAILS travelList:travelDetailLists ){

t02Travelfrom=travelList.getT02Travelfrom();

if(tfromstatic.equals(t02Travelfrom)){

}


}


}

Answer 1

试试这个:

$("#value").keypress(function() {
var data = $("#value").val()
var dataString = 'function=getValues'+'&data='+data;
$.ajax({

url: "<liferay-portlet:resourceURL></liferay-portlet:resourceURL>",
data: dataString ,
cache: false,
success: function(html)
{
 if(html!='')
 {

 // ToDo display HTML result wherever you want. (in your case, html values would come in drop down)

alert(html);
 $('#value').val("");
 }

} }); return false; });

成功后，您将获得 HTML 形式的结果。在下拉列表中填充这些值。

希望这对您有帮助。