2

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

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

我已经为自动完成建议文本框编写了 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)){

}


}


}
4

3 回答 3

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 格式的结果。在下拉列表中填充这些值。

希望这会对你有所帮助。

于 2013-08-01T10:49:44.763 回答
0

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

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

要开始学习，您可以查看http://jqueryui.com/autocomplete/如果它符合您的要求。它没有 ajax，但会从预填充的数组中获取结果。

于 2013-08-01T06:48:33.240 回答
0

您可以像这样使用 jquery ui 自动完成小部件并使用 ajax 映射实现动态数组

<input type="text" name="name" class="span2" id="name"  required/>

在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时起作用

于 2013-08-01T07:11:54.020 回答