Live Search get multiple fields

Question

I have this live search and it works perfectly. What i want to do is I want to get another field. Aside of fetching indcator name i also want to get its ID by assigning it to another input type once I clicked the indicatorname using live search.

Heres the Script :

  <script type="text/javascript">
       $(document).ready(function() {
       $('#indicatorname').autocomplete({
           source: function( request, response ) {
           $.ajax({
             url : 'ajax.php',
             dataType: "json",
        data: {
           name_startsWith: request.term,
           type: 'indicatorname'
        },
         success: function( data ) {

           response( $.map( data, function( item ) {
            return {
              label: item,
              value: item
            }
          }));  


         }
          });
        },
        autoFocus: true,
        selectFirst: true,
        minLength: 0,
        focus : function( event, ui ) {
         $('#indicatorname').html(ui.item.value);
        },
        select: function( event, ui ) {
         $('#indicatorname').html(ui.item.value);
        },
        open: function() {
         $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
        },
        close: function() {
          $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }           
         });

     $('#slider').rhinoslider({
        effect: 'transfer'
      });
        });
   </script>

Heres the ajax.php :

  <?php

   $connection = pg_connect("host=localhost dbname=brgy_profiler
                 user=postgres password=password");

    if (!$connection)
         {  
          echo "Couldn't make a connection!";
         }

  ?>

<?php

    if($_GET['type'] == 'indicatorname'){
     $result = pg_query("SELECT cindicatordesc,nindicatorid from
                          tbl_indicators where cindicatordesc LIKE
                          '%".$_GET['name_startsWith']."%'");   
     $data = array();
    while ($row = pg_fetch_array($result)) 
       {
         array_push($data, $row['cindicatordesc']);
       }    

        echo json_encode($data);
     }

  ?>

Here's my tbl_indicator :

How can i get also the nindicatorid field and get it together with cindicatordesc using ajax live search?

Note: Only cindicatordesc will be displayed and nindicatorid will be save in an input type.

Answer 1

Not a problem. You can add additional data attributes in your Auto-complete select return as,

 $('#indicatorname').autocomplete({   
         source: function( request, response ) {
         ...........
         success: function( data ) {
           response( $.map( data, function( itemList ) {
            return {
              label: itemList.label,
              value: itemList.value,
              extraField : itemList.extraField
                }
          }));

So, Only change you need to accommodate is the Server side where you need to send the extra values to the Auto-complete AJAX.

And , On select event you can fetch the value as ui.item.extraField .

Here is a Sample Demo of using multiple attributes. Although it is not same as you have done, the inner logic is the same.