Advanced Search

@fractastical Visualforce jQuery autocomplete Page

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.