suggestion text field like — google suggestion - using AJAX/Jquery

问题

When I enter the letter in text filed and if it has a match in the database, it should display all the matched words. When I enter some text in the Travelfrom text field like: A then I should get the all records which start with A when I enter the Travelfrom(text field) it will auto complete it , It should be like Google suggestion. How to do it in AJAX.

Now: I retrieve the Travelfrom data from the database. Now when I entered first letter in travelfrom textfield, it should check and its equal, display list of matching records.

I have written the Jquery/Ajax code for auto complete suggestion text box and I pass the textfield value from AJAX to java, to check the condition. Please let me know how to check the condition and send back display the suggestion box. Please help me.

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)){

}


}


}

回答1:

Try this:

$("#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; });

On Success you will get the results in the form of HTML. Populate these values in drop down.

Hope this would help you.

回答2:

You should search for autosuggest JQuery or autosuggest Javascript to get enough results from google.

For Ajax based http://w3shaman.com/article/jquery-cool-auto-suggest

To start learning you can see http://jqueryui.com/autocomplete/ if it suits your requirements. It has no ajax but brings results from prepopulated array.

回答3:

you can use jquery ui auto complete widget and implement dynamic array using ajax mapping like this

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

and in js you would have do something like this

$('#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
                        }
                    }));
                }
            });
        }
    });

});

this will work when you use jqueryui

来源：https://stackoverflow.com/questions/17986888/suggestion-text-field-like-google-suggestion-using-ajax-jquery

标签

jquery

ajax

liferay-6