@fractastical Visualforce jQuery autocomplete Page


/ Published in: Other
Save to your folder(s)



Copy this code and paste it in your HTML
  1. //MOD of example in http://www.tgerm.com/2010/02/visualforce-salesforce-jquery-ajax-how.html by d3developer (d3developer.com)
  2.  
  3.  
  4. <apex:page showHeader="true" standardStylesheets="true" >
  5.  
  6. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"
  7. type="text/JavaScript" />
  8.  
  9. src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"
  10. type="text/JavaScript" />
  11.  
  12.  
  13. <apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/cupertino/jquery-ui.css"/>
  14.  
  15.  
  16. <script type="text/JavaScript">
  17. function search() {
  18. $("#status").html(
  19. "Making a Jquery Ajax Request to '{!$Page.largeLookup}'");
  20.  
  21. // Make the Ajax Request
  22. $.getJSON("{!$Page.largeLookup}", {
  23. "core.apexpages.devmode.url" :'1',
  24. "term" :$('#query').val()
  25. }, function(data) {
  26. $("#response").html(JSON.stringify(data));
  27. });
  28.  
  29.  
  30. $("#status").html("Ajax Request Completed !");
  31. }
  32.  
  33. $(function() {
  34.  
  35.  
  36. $("#autoc").autocomplete({
  37.  
  38. source: function(request, response) {
  39. $.getJSON("{!$Page.largeLookup}", {
  40. // "core.apexpages.devmode.url" :'1',
  41. term: request.term
  42.  
  43. }, response);
  44. },
  45. select: function(event, ui) {
  46.  
  47. $('#response').html(ui.item.id);
  48.  
  49. },
  50. minLength: 2
  51.  
  52. });
  53. });
  54. </script>
  55.  
  56.  
  57. <apex:sectionHeader title="Ajax Client Demo" />
  58.  
  59. <apex:pageblock >
  60. <apex:pageBlockSection title="Query Console">
  61. <form id="qform">Query String <input type="text" id="query" />
  62. <input type="button" onclick="search()" value="Search Objects " /></form>
  63. Query String Autocomplete <input type="text" id="autoc" />
  64.  
  65. </apex:pageBlocksection>
  66.  
  67. <apex:pageBlockSection title="Ajax Console">
  68. <h1>Status</h1>
  69. <pre id="status" style="font-size: 16px" />
  70.  
  71. <h1> JSON Response </h1>
  72. <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />
  73. </apex:pageBlocksection>
  74. </apex:pageblock>
  75.  
  76. </apex:page>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.