<< Click to Display Table of Contents >> Navigation:  Using script in HTML document > Usage examples > Incremental search

*HTML Report Library is required.

When edit is changed, SetTimeout function adds ShowCustomers to queue with 500ms delay. Next change of the edit, reset queued function and starts new.

ShowCustomers executes report via RunHtReport and passes result to #cust div element.

 

<style>
 a {text-decoration: none}
 a:hover {text-decoration: underline}
</style>
 
<script type="passcript">

 
procedure showcustomers();
begin
 { Report code }
 s:='<report-objects><object name="cust" '+

   'sql="select * from customer where upper(company) like ''%%{{SEARCH}}%%'' order by company"/>'+

    '</report-objects>'+
  '{{#cust.ROWDATA}}'+
  '<p><i class="fa fa-user"/> <a href="#">{{COMPANY}}</a></p>'+
  '{{/cust.ROWDATA}}';

 
  Async(

   function(value: string): string; 
   begin 
    Result := RunHtReport(s, '<CONTEXT SEARCH="' + AnsiUpperCase(value) + '"/>'); 
   end, 
   procedure(value, s: string); 
   begin 
    $('#cust').html := s;
    document.refresh();
  end,
  this.value
 );
end;

 
</script>
 
<input type="text" onchange="ClearInterval(custsearch); 

   custsearch:=SetTimeout(showcustomers, 500);">
<div id="cust"></div>