Autocomplete issue in append html - ajax

Question

I'm trying to make autocomplete in appended field.
My codeigniter view file:
<div class="right_col" role="main">
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<span class="section">Search Product's Info</span>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Product Name <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="prosearch" class="form-control col-md-7 col-xs-12" name="prosearch" type="text" placeholder="Search">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My script:
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function() {
// alert('hello');
$( "#prosearch" ).autocomplete({
source: function( request, response ) {
var t = $('#prosearch').val();
$.ajax({
type: "POST",
url: "<?php echo site_url('sale/search') ?>",
data: { term: request.term },
dataType: 'json',
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.data,
value: item.product_name,
id: item.id
}
}));
}
});
}
})
});
</script>
My Controller method:
public function search(){
$q=$_POST["term"];
#print_r($q); exit;
$query = $this->db->query("SELECT * FROM product WHERE product_name LIKE '".strtoupper($q)."%';");
$data= $query->result_array();
$json = json_encode($data);
echo $json;
}
My output is:
Well i am trying to my search result is under own input like any other autosuggestion.
Any kind of help.