Apex Code Development You need to sign in to do that
Don't have an account?
Visualforce apex function
<apex:page sidebar="false" showHeader="false" docType="html-5.0" controller="Ecommerce">
<apex:form >
<apex:actionFunction name="passStringToController" action="{!myMethod}" reRender="op">
<apex:param name="params" assignTo="{!EnteredText}" value=""/>
</apex:actionFunction>
<apex:outputPanel id="op">
<apex:outputText value="{!prodlist}"/>
</apex:outputPanel>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#ip1").keyup(function(){
var enteredtext=document.getElementById("ip1").value;
//alert(enteredtext);
passStringToController(enteredtext);
});
});
</script>
<center><h1>Welcome to Ecommerce Website</h1></center>
<div class="searchproducts">
<form>
<input type="text" placeholder="Search Products.." class="sp" id="ip1"/>
<input type="text" name="search" placeholder="Search Categories.." class="sc"/>
</form>
</div>
<style>
.sp{
width: 160px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 13px;
background-color: white;
background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
float:right;
}
.sp:focus{
width: 20%;
}
.sc{
width: 160px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 13px;
background-color: white;
background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-22.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
float:right;
}
.sc:focus{
width: 20%;
}
h1{
font-size:20px;
}
</style>
</html>
</apex:form>
</apex:page>
//Controller
public class Ecommerce {
public String EnteredText{get;set;}
public List<Product2> prodlist{get;set;}
public PageReference myMethod() {
system.debug(EnteredText);
List<Product2> prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
system.debug(prodlist);
return null;
}
}
Hi All,Need help.MY Requirement here is in my vf page i should be able to display result from controller.
What i am doing is using onkeyup event which invokes passStringToController() method in action function which inturns calls mymethod in controller and there i am fetching results using query.Now the query result i wanted to display in vf page. Basically the idea is i am designing a ecommerce website so when any user enters product name like 'c' it should display all products with c.If he types on like "co" then it should display products with co like we search in amazon and all.
the result should be displayed exactly in the input text area.
Thanks in Advance
Your code is fine.. There is a silly mistake in your Apex Class.
List<Product2> prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
In this line you have created new prodlist variable which is not public.
Just change this line to :
prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
Your code will work.
Regards,
Rushi
All Answers
In inputtext during keyPress event call the javascript function this inturn will call actionFunction and controller function.
Thanks,
Govindaraj.S
Your code is fine.. There is a silly mistake in your Apex Class.
List<Product2> prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
In this line you have created new prodlist variable which is not public.
Just change this line to :
prodlist=[Select Name from Product2 where name like: EnteredText + '%'];
Your code will work.
Regards,
Rushi