建议文本字段像 – 谷歌建议 – 使用AJAX / Jquery

当我在文本字段中输入字母并且如果它在数据库中有匹配时，它应该显示所有匹配的单词。 当我在Travelfrom文本字段中输入一些文本时，如：A然后我应该得到所有以A开头的记录，当我进入Travelfrom（文本字段）时它将自动完成它，它应该像Google建议。 如何在AJAX中完成。

现在：我从数据库中检索Travelfrom数据。 现在，当我从textfield输入travel中的第一个字母时，它应该检查并且它相等，显示匹配记录的列表。

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

function getAutoSuggestionData(){ alert("calling ajax method getAutoSuggestionData()"); $(document).ready(function(){ $('#t02Travelfrom').keyup(function(e){ alert("1"); var t02Travelfrom=$("#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  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: "", 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的forms获得结果。 在下拉列表中填充这些值。

希望这会对你有所帮助。

Answer 2

您应该搜索autosuggest JQuery或autosuggest Javascript以从google获得足够的结果。

对于基于Ajax的http://w3shaman.com/article/jquery-cool-auto-suggest

要开始学习，您可以查看http://jqueryui.com/autocomplete/，如果它符合您的要求。 它没有ajax但是带来了预填充arrays的结果。

Answer 3

你可以使用jquery ui auto complete widget并使用像这样的ajax映射实现动态数组

在js你会做这样的事情

 $('#name').autocomplete(); $('#name').keyup(function(e){ var name = $('#name').val(); $('#name').autocomplete({ source:function(request, response){ $.getJSON('someurl'+name,function(data){ //console.log(data[0].name); if(data != null){ response($.map(data, function (item) { return { value: item.name } })); } }); } }); }); 

这将在你使用jqueryui时起作用