home.php

            <section id="header">
                <div class="wc-container">
                    <div class="wc-grid">
                        <div class="wc-block wc-box-100">
                   	   		<img src="<?=base_url()?>main-theme/images/main_bg.jpg" class="main_img">
                            <div class="location_form_wrap">
                            	<form class="horizontal" action="" id="">
                                	<fieldset>
                                        <div class="control-group  wc-box-27">                                    	
                                            <div class="controls">
                                            	<div class="icon"><img src="<?=base_url()?>main-theme/images/location_icon.jpg"></div>
                                                <div class="input_box select">  
                                                	 <input type="text"  id="tbCountries1" name="city" onBlur="getarea(this.value)" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group  wc-box-58">                                    	
                                            <div class="controls">
                                            	<div class="icon"><img src="<?=base_url()?>main-theme/images/building_icon.png"></div>
                                                <div class="input_box">
                                                <!--<div id="find_btn"><i class="fa fa-map-marker"></i>Locate Me</div>-->
                                                <input type="text"  id="tbCountries" name="area" placeholder="Enter Your Locality">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group  wc-box-15">                                    	
                                            <div class="controls">
                                            	<a href="prouct.html">Proceed</a>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
    		<script src="<?=base_url()?>main-theme/js/jquery-1.12.4.js"></script>                            
            <script src="<?=base_url()?>main-theme/js/materialize.js"></script>
  			<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        	<script src="<?=base_url()?>main-theme/js/main.js"></script>
            <script src="<?=base_url()?>main-theme/js/select2.min.js"></script>
            
            <script>
            	function getarea(city){
					$.ajax({
						url: '<?php echo base_url()?>Home/getArea',
						type: 'POST',
						data: {id: city},
						
						success: function(data) {
						area = data;
						}
					});
					}
            </script>
            <script>
			$(document).ready(function() {		
			$('.select2').select2();
			});
            	
				  $( function() {
					var availableTags = [area];
					$( "#tbCountries" ).autocomplete({
					  source: availableTags
					});
				  } );
				  
				  var months = [<?=$city;?>];
				$('#tbCountries1').autocomplete({
					source : months,
					minLength: 0,
					minChars: 0,
					max: 12,
					autoFill: true,
					mustMatch: true,
					matchContains: false,
					scrollHeight: 220,
					formatItem: function(data, i, total) {
						if ( data[0] == months[new Date().getMonth()] ) 
							return false;
						return data[0];
					}
				}).on('focus', function(event) {
					var self = this;
					$(self).autocomplete( "search", "");;
				});

            </script>