Question

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

现在：我从数据库中检索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)){

}


}


}

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

希望这会对你有所帮助。

Answer 2

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

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

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

Answer 3

你可以使用jquery ui auto complete widget并使用像这样的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

时，这将有效

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

3 个答案: