How to use autocomplete using jQuery from a database using codeigniter?

Question

this is my type of search with the following code:

<input type="text" required ="required"name="city_code" id="code" autocomplete="off" class="form-control"> 

and this is my jquery, what I tried to do:

 function city_value() { return '/ajax/get_address_list?city_code='+$('#code').val(); } $tmp_location={}; $('#code').autocomplete({ serviceUrl:city_value, minChars:2, lookupLimit: 25, focus_suggestion:true, transformResult: function(response) { $tmp_location=$.parseJSON(response); return { suggestions: $tmp_location }; } }); 

and this is my controller for search autocomplete type:

 function get_address_list(){ $post_code= $this->input->get("city_code",true); $location_list=$this->ajax_m->m_get_address_like($post_code); echo json_encode($location_list); } 

here is the model:

 function m_get_address_like($city_code){ $sql = "SELECT `singapore_address`,`singapore_postal_code` FROM `uhd_singapore_address` WHERE `singapore_postal_code`='$city_code%' OR (singapore_address LIKE '$city_code%')"; $query=$this->db->query($sql); return $query->result_array(); } 

I checked using firebug and I got the following error in autocomplete.js

 Autocomplete.formatResult = function (suggestion, currentValue) { var pattern = '(' + utils.escapeRegExChars(currentValue) + ')'; return suggestion.value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');// in this line }; 

Answer 1

There is an Autocomplete plugin in jQuery UI: https://jqueryui.com/autocomplete/

Using this, the logic is this:

Model

 function m_get_address_like($city_code){ $sql = "SELECT `singapore_address`,`singapore_postal_code` FROM `uhd_singapore_address` WHERE `singapore_postal_code`='$city_code%' OR (singapore_address LIKE '$city_code%')"; $query=$this->db->query($sql); //return $query->result_array(); //I would replace the upper line by the next code: $sug_singapore_address = array(); $sug_singapore_postal_code = array(); foreach ($query->result() as $value) { $sug_singapore_address = $this->metadata($value->singapore_address); $sug_singapore_postal_code = $this->metadata($value->singapore_postal_code); } $metadata->sug_singapore_address_implode = implode(", ", $sug_singapore_address); $metadata->sug_singapore_postal_code_implode = implode(", ", $sug_singapore_postal_code); return $metadata } 

Controller:

 function get_address_list(){ $post_code= $this->input->get("city_code",true); $location_list=$this->ajax_m->m_get_address_like($post_code); $sug_singapore_address = array(); $sug_singapore_postal_code_implode = array(); foreach($location_list as $value) { $sug_singapore_address[] = $value->sug_singapore_address_implode; $sug_singapore_postal_code[] = $value->sug_singapore_postal_code_implode; } $singapore_address = array_unique($sug_singapore_address); $singapore_postal_code = array_unique($sug_singapore_postal_code); } 

View:

 <script> $(function() { var singapore_address = ['<?php echo implode("','",$singapore_address); ?>']; var sug_singapore_postal_code = ['<?php echo implode("','",$sug_singapore_postal_code); ?>']; ... } $( "#city_code" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( sug_singapore_postal_code, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); 

Answer 2

An example of response data is as follows:

 [ { "label":"Some Label", "value":"Some Value" }, { "label":"Some Label", "value":"Some Value" }, { "label":"Some Label", "value":"Some Value" }, { "label":"Some Label", "value":"Some Value" } ] 

JS code:

 function city_value() { return '/ajax/get_address_list?city_code='+$('#code').val(); } $("#currency_prefix").autocomplete({ source: city_value, minLength: 2, autoFocus: false, delay: 500, select: function (event, ui) { // ui.item result item you can do any operation after result selected. }, response: function (event, ui) { if (ui.content.length == 1 && ui.content[0].id != 0) { ui.item = ui.content[0]; $(this).val(ui.item.address); } }, }); 

Controller:

 function get_address_list(){ $post_code= $this->input->get("city_code",true); $location_list = $this->ajax_m->m_get_address_like($post_code); $data = array(); foreach($location_list as $list_location) { $data[] = array( 'label' => $list_location->singapore_postal_code, //This will be displayed when user types on autocomplete input field. It should be 'label'. 'value' => $list_location->singapore_address, //This will be displayed once user selected any of the listed results on the input. It should be 'value'. 'address' => $list_location->singapore_address, //Extra columns for later operations if any. ...//Other Column defnitions ); } echo json_encode($data); } 

Model:

 function m_get_address_like($city_code){ $this->db->select('singapore_address, singapore_postal_code'); $this->db->like('singapore_postal_code', $city_code,'after'); $this->db->or_like('singapore_address', $city_code,'after'); $q = $this->db->get('uhd_singapore_address'); if($q->num_rows() > 0) { foreach($q->result() as $row) { $data[] = $row; } return $data; } return false; } 

I have not tested this yet. Try it yourself. Add a comment if any error occurs, otherwise enjoy coding.

Answer 3

View:

This is one line in the view file:

 <?php echo json_encode($my_data); ?> 

Controller:

  function jsonData() { if ($this->input->get('type') == 'country_table') { $query = $this->db->get('leverantor'); $this->db->select('leverantors_namn, leverantors_nr, lastbararavtal'); $this->db->from('leverantor'); $this->db->where('leverantors_nr =' . $this->input->get('name_startsWith')); $this->db->limit(1); $query = $this->db->get(); foreach ($query->result() as $row) { $arr[''] = $row->leverantors_nr."|".$row->leverantors_namn."|".$row->lastbararavtal; } } $data["my_data"] = $arr; //$this->entries->autocomplete($this->input->get('name_startsWith')); //$this->example_model->get_examples($this->input->post('name1'),$this->input->post('name2')); $this->load->view('json/json_example_view', $data); } 

View:

 <?php $leverantors_nr = array( 'name' => 'leverantors_nr', 'type' => 'text', 'id' => 'leverantors_nr', 'value' => $this->input->post('leverantors_nr'), 'placeholder' => 'Leverantörs Nr.', 'class' => 'span4' ); ?> <?= form_input($leverantors_nr); ?> <script type="text/javascript"> $('#leverantors_nr').autocomplete({ source: function(request, response) { $.ajax({ url : 'palla/jsonData', dataType: "json", data: { name_startsWith: request.term, type: 'lev_table', row_num : 1 }, success: function(data) { response($.map(data, function(item) { var code = item.split("|"); return { label: code[0], value: code[0], data : item } })); } }); }, autoFocus: true, minLength: 1, select: function(event, ui) { var names = ui.item.data.split("|"); $('#leverantors_namn').val(names[1]); } } }); </script>