Advanced Search

auto complete like google suggestion

/ Published in: PHP
Save to your folder(s)
1. auto complete code snippet like google suggestions
2. auto suggestion with list of static suggestion on click on input box.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  2.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  4.  
  5.   <script>
  6.   $(document).ready(function() {
  7.     $("input#s").autocomplete({
  8.     source: ["Sydney", "Wollongong", "Whyalla", "Warrnambool", "Wagga Wagga", "Traralgon"
  9.              , "Townsville", "Toowoomba", "Tewantin-Noosa", "Taree", "Tamworth", "Sunshine Coast",
  10.              "Sunbury", "Shoalhaven", "Shoalhaven", "Shepparton-Mooroopna", "Roebourne", "Rockhampton",
  11.              "Richmond-Windsor", "Queanbeyan", "Port Macquarie", "Perth" ,
  12.              "Palmerston", "Newcastle", "Mount Isa", "Mount Gambier"]
  13.     });
  14.   });
  15.   /** get enty http://wwp.greenwichmeantime.com/time-zone/australia/city/index.htm **/
  16.   </script>
  17.  
  18.  
  19.  
  20. /*************************************************************/
  21. /*************************** POINT 2 *************************/
  22. /*************************************************************/
  23.  
  24.  
  25. <script type="text/javascript">
  26. $(function() {
  27. 	$('input#s').autocomplete({
  28. 		source: [ "Melbourne", 
  29. 				 "Kyneton", 
  30. 				 "Edinburgh", 
  31. 				 "Castlemaine", 
  32. 				 "Ballarat", 
  33. 				 "Bendigo", 
  34. 				 "New York", 
  35. 				 "Tokyo", 
  36. 				 "Beijing", 
  37. 				 "London"
  38. 				],
  39. 		minLength: 0
  40. 	}).focus(function(){            
  41. 		$(this).data("autocomplete").search($(this).val());
  42. 	});
  43. });
  44. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.