text: Q:
  
  How to display jquery auto complete result as links
  
  I have a product database from which I have to show the product title as result in jquery auto complete searching. I want to show the search listing as link so that when user click on the result he will be redirect to the product description page. I am using codeigniter currently its working fine and show searching result perfectly but I don't know how I can show them in links. Check my controller, model and view code below:
  My database fields
  prod_id, prod_name, prod_title, prod_description
  Controllers/product.php
  public function searchItems()
  {
          $srch = $this->main_model->searchProduct($this->input->get('term', TRUE));
          $status = $srch['status'];
          if ($status == 1)
          {
              $rslt = $srch['rs'];
              for ($i=0; $i < count($rslt); $i++) { 
                $farr[] = $rslt[$i][0];
              }
              echo json_encode($farr);
          }
          else
          {
              $rslt = array('No result found.');
              echo json_encode($rslt);
          }
  }
  
  Model Code
  public function searchProduct($searchTerm)
  {
    $this->db->like('title', $searchTerm, 'both');
    $srchData = $this->db->get('seller_item');
    if ($srchData->num_rows() > 0)
    {
      $rsult = $srchData->result();
      foreach ($rsult as $value)
      {
        $prodName[] = array($value->title);
      }
      return array("status"=>1, "rs"=>$prodName);
    }
    else {
      return array("status"=>0);
    }
  }
  
  View Code
  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(document).ready(function(){
  $( "#skills" ).autocomplete({
    source: "http://localhost:8888/store/test/search/?"
  });
  });
  </script>
  </head>
  <body>
  
  <div class="ui-widget">
  <label for="skills">Skills: </label>
  <input id="skills">
  </div>
  </body>
  </html>
  
  I want to create link like this format:
  http://localhost:8888/store/product/view/8
  So that user can redirect to the detail page when he/she click on the specific search result.
  
  A:
  
  Make use of the _renderItem option provided by default. Below is the sample.
  $("#project").autocomplete({
      source: "http://localhost:8888/store/test/search/?"
  })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
          .append( '<div><a href="http://localhost:8888/store/product/view/' + item.id + '"></a>' + item.desc + '</div>' )
          .appendTo(ul);
           //Assuming here your item contains product id and description
  };
  
  Here is their official documentation on custom data
  I would like to suggest here to use relative url instead of absolute url, since production might not have localhost instead it will have domain name.
  
  