Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
a g
Auto suggest text box
July 31, 2013 3:39 AM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

Hi,

when I enter the letter and if match in the database, it should display all the match words, in the text field. for example --> see the screenshot,

when I enter the travelfrom field like: A
I should get the all records which start with A
when I enter the Travel from(text field) it will auto complete it , It should like Google suggestion. How to do it in AJAX. Can I get a suggestion or guideline.

I am using Liferay6.1.0.CE
Attachment

Attachments: autocomplete1.jpg (24.5k)
chirag @ India
RE: Auto suggest text box
July 19, 2013 9:27 PM
Answer

chirag @ India

Rank: Regular Member

Posts: 129

Join Date: December 20, 2011

Recent Posts

hi anad ,

You can used AUI autocomplete control .

see this blog

This is good exmpale & it woks i implemented it .

HTH
Chirag@India
a g
RE: Auto suggest text box
August 1, 2013 10:03 PM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

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


}
}); return false;
}else
{
}
});
});
}


Traveldetail.java ---> writing JASON --> Please let me know how to get the JASON object in JSP and display the result.


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

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

JSONObject json = JSONFactoryUtil.createJSONObject();
JSONArray results = JSONFactoryUtil.createJSONArray();

json.put("response", results);
DynamicQuery dynamicQuery =null;
String keyWord = StringPool.BLANK;
List<String> keywordList = new ArrayList<String>();
List<EMP_TRAVEL_DETAILS> myKeyWordList = null;
String searchPattern = tfromstatic;
searchPattern = searchPattern.replace('*', '%');
dynamicQuery = DynamicQueryFactoryUtil.forClass(EMP_TRAVEL_DETAILS.class).add(PropertyFactoryUtil.forName("keyword").like(searchPattern+"%" ));
try {
myKeyWordList = (List<EMP_TRAVEL_DETAILS>)EMP_TRAVEL_DETAILSLocalServiceUtil.dynamicQuery(dynamicQuery);
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
for (int i = 0; i < myKeyWordList.size(); i++ ) {
JSONObject listEntry = JSONFactoryUtil.createJSONObject();

keyWord=myKeyWordList.get(i).getT02Travelfrom();
listEntry.put("key", keyWord);
results.put(listEntry);
System.out.println("results.put(listEntry)"+results);

}
PrintWriter writer = response.getWriter();
writer.println(json.toString());
}
Priyanka Dhingra
RE: Auto suggest text box
August 1, 2013 10:55 PM
Answer

Priyanka Dhingra

Rank: Liferay Master

Posts: 501

Join Date: December 19, 2011

Recent Posts

in your js, append this
1success: function(){
2            var data = this.get('responseData');
3            console.log(data.key);
4        }
a g
RE: Auto suggest text box
August 2, 2013 4:23 AM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

Hi Priyanka,

Now I can able to get the records in the java. Using below code,

public void GetAutoSuggestionData(ResourceRequest request, ResourceResponse response) throws SystemException, IOException {
..........
........
for (int i = 0; i < myKeyWordList.size(); i++ ) {

System.out.println("******inside for loop******");
JSONObject listEntry = JSONFactoryUtil.createJSONObject();

keyWord=myKeyWordList.get(i).getT02Travelfrom();
listEntry.put("key", keyWord);
results.put(listEntry);
System.out.println("results.put(listEntry)"+results);
response.getWriter().write(listEntry.toString());


}
}

.js

function getAutoSuggestionData(){

success: function(data) {

alert("getting value-->"+data.response);-->it coming undefiend---> how to get the value
for(var z=0; z<data.keyWord;z++){
keyWord = data.keyWord.split(":");
$("#t02Travelfrom").append("<option value="+keyWord[0]+">'"+keyWord[1]+"'</option>");
}
}

}

In console output:

inside try
******inside for loop******
results.put(listEntry)[{"key":"Airport"}]
******inside for loop******
results.put(listEntry)[{"key":"Airport"},{"key":"Andrapradesh"}]
Priyanka Dhingra
RE: Auto suggest text box
August 2, 2013 4:50 AM
Answer

Priyanka Dhingra

Rank: Liferay Master

Posts: 501

Join Date: December 19, 2011

Recent Posts

did you try following my previous post????
a g
RE: Auto suggest text box
August 2, 2013 5:16 AM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

s priyanka I tried and I am getting the below error.


Object doesn't support property or method 'get'

success: function() {
var data = this.get('responseData');
for(var z=0; z<data.keyWord;z++){
alert("getting value-->"+data.keyWord);
keyWord = data.keyWord;
$("#t02Travelfrom").append("<option value="+keyWord[0]+">'"+keyWord[1]+"'</option>");
}
}
Priyanka Dhingra
RE: Auto suggest text box
August 5, 2013 2:49 AM
Answer

Priyanka Dhingra

Rank: Liferay Master

Posts: 501

Join Date: December 19, 2011

Recent Posts

1success: function(data) {
2var returnedData = JSON.parse(data);
3console.log(returnedData);
4}

try this
a g
RE: Auto suggest text box
August 5, 2013 4:36 AM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

Hi,

I tried below code and I am getting the records--> see the listentry screenshot, but when I split it, its displaying only { -- see the valueof entry screenshot.
my AJAX code:
function getAutoSuggestionData(){
alert("calling ajax method getAutoSuggestionData()");

$(document).ready(function(){
alert("inside ready function");
var t02Travelfrom=$("#<portlet:namespace />t02Travelfrom").val();
var autodataString = 'function=Getautodatafield'+'&t02Travelfrom='+ t02Travelfrom;

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

url: "${getTravelDataAutoUrl}",
data: autodataString,
cache: false,
type:'get',
datatype:'json',
success: function(listEntry) {
alert("listEntry.length-->"+listEntry.length);
for(var z=0; z<listEntry.length;z++){

alert("listentry-->"+listEntry); --> See the listEntry screenshot
listEntry= listEntry.split(":");
alert("value of listEntry-->"+listEntry[0]); --> See the Value of listentry screenshot

$("#t02Travelfrom").append("<option value="+listEntry[0]+">'"+listEntry[1]+"'</option>");
}
}
}); return false;
}else
{


}


});


}
Attachment

Attachment

Attachments: listentry.jpg (14.5k), value_listentry.jpg (7.9k)
Priyanka Dhingra
RE: Auto suggest text box
August 5, 2013 8:49 PM
Answer

Priyanka Dhingra

Rank: Liferay Master

Posts: 501

Join Date: December 19, 2011

Recent Posts

try
1listEntry.response[0]
a g
RE: Auto suggest text box
August 8, 2013 6:24 AM
Answer

a g

Rank: Expert

Posts: 429

Join Date: March 2, 2012

Recent Posts

Hello priyanka,

I tried like below
alert("value of listEntry-->"+listEntry.response[0]);


I am getting this error: Error: Unable to get value of the property '0': object is null or undefined

Please let know how to display the data in the option

Actual HTML Code:
<aui:input name="t02Travelfrom" id="t02Travelfrom" type="text" label="" maxlength="25" value="" onkeyup="getAutoSuggestionData()">

<aui:validator name="required" errorMessage="this-field-is-required"/>
<aui:validator name="alpha" />

</aui:input>


HTML source code:
<input id="_EmpTravelDetails_WAR_EmpTravelDetailsportlet_t02Travelfrom" class="aui-field-input aui-field-input-text aui-form-validator-valid" type="text" onkeyup="getAutoSuggestionData()" maxlength="15" value="" name="_EmpTravelDetails_WAR_EmpTravelDetailsportlet_t02Travelfrom" aria-required="true"></input>