jQuery autocomplete selection event

Question

I have created jQuery UI autocomplete which is working very good. But my requirement is that what I display as list should also select same in text box. But it is not selecting For example list like XXX (XYZ) but when I select it only select XXX not XXX (XYZ) what I am missing !!

function getDeptStations() {
$("#txDestination").autocomplete({
  source: function (request, response) {
    var term = request.term;
    var Query = "";
    if (lang === "en")
      Query = "City_Name_EN";
    else if (lang === "fr")
      Query = "City_Name_FR";
    if (lang === "de")
      Query = "City_Name_DE";
    if (lang === "ar")
      Query = "City_Name_AR";
    var requestUri = "/_api/lists/getbytitle('Stations')/items?$select=City_Code," + Query + "&$filter=startswith(" + Query + ",'" + term + "')";
    $.ajax({
      url: requestUri,
      type: "GET",
      async: false,
      headers: {
        "ACCEPT": "application/json;odata=verbose"
      }
    }).done(function (data) {
      if (data.d.results) {
        response($.map(eval(data.d.results), function (item) {
          return {
            label: item[Query] + " (" + item.City_Code + ")",
            value: item[Query],
            id: item[Query]
          }
        }));
      }
      else {

      }
    });
  },
  response: function (event, ui) {
    if (!ui.content.length) {
      var noResult = { value: "", label: "No cities matching your request" };
      ui.content.push(noResult);
    }
  },
  select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
  },
  minLength: 1
});
 }

Solution 1

Almost there, just return a false from select event.

select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
    return false;
  },

or Simply

select: function (event, ui) {        
          alert(ui.item.id);
          return false;
  },

This will guide jquery autocomplete to know that select has set a value.

Update: This is not in the documentation, I figured out by digging into source code, took me some time. But indeed it deserves to be in the doc or in options.

Solution 2

in this case you have to options

1. the obvious one set value:item[Query] + " (" + item.City_Code + ")" but I am assuming this is not the option.

2. Handle the selection by yourself first check the api doc and you will see event like below. with event.target you can access your input with ui you can access you selected item.

   $( ".selector" ).autocomplete({
       select: function( event, ui ) {}
   });
   

Solution 3

I understand its been answered already. but I hope this will help someone in future and saves so much time and pain.

After getting the results in autocomplete you can use below code for keeping the value in the autocomplete textbox field. (you can replace 'CRM.$' with '$' or 'jQuery' depending on your jQuery version)

select: function (event, ui) {
                var label = ui.item.label;
                var value = ui.item.value;

                //assigning the value to hidden field for saving the id
                CRM.$( 'input[name=product_select_id]' ).val(value);
                //keeping the selected label in the autocomplete field
                CRM.$('input[id^=custom_78]').val(label);
                return false;
        },

complete code is below: This one I did for a textbox to make it Autocomplete in CiviCRM. Hope it helps someone

CRM.$( 'input[id^=custom_78]' ).autocomplete({
            autoFill: true,
            select: function (event, ui) {
                    var label = ui.item.label;
                    var value = ui.item.value;
                    // Update subject field to add book year and book product
                    var book_year_value = CRM.$('select[id^=custom_77]  option:selected').text().replace('Book Year ','');
                    //book_year_value.replace('Book Year ','');
                    var subject_value = book_year_value + '/' + ui.item.label;
                    CRM.$('#subject').val(subject_value);
                    CRM.$( 'input[name=product_select_id]' ).val(ui.item.value);
                    CRM.$('input[id^=custom_78]').val(ui.item.label);
                    return false;
            },
            source: function(request, response) {
                CRM.$.ajax({
                    url: productUrl,
                        data: {
                                        'subCategory' : cj('select[id^=custom_77]').val(),
                                        's': request.term,
                                    },
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    },

                    success: function(result){
                                result = jQuery.parseJSON( result);
                                //console.log(result);
                                response(CRM.$.map(result, function (val,key) {
                                                         //console.log(key);
                                                         //console.log(val);
                                                         return {
                                                                 label: val,
                                                                 value: key
                                                         };
                                                 }));
                    }
                })
                .done(function( data ) {
                    if ( console && console.log ) {
                     // console.log( "Sample of dataas:", data.slice( 0, 100 ) );
                    }
                });
            }
  });

PHP code on how I'm returning data to this jquery ajax call in autocomplete:

/**
 * This class contains all product related functions that are called using AJAX (jQuery)
 */
class CRM_Civicrmactivitiesproductlink_Page_AJAX {
  static function getProductList() {
        $name   = CRM_Utils_Array::value( 's', $_GET );
    $name   = CRM_Utils_Type::escape( $name, 'String' );
    $limit  = '10';

        $strSearch = "description LIKE '%$name%'";

        $subCategory   = CRM_Utils_Array::value( 'subCategory', $_GET );
    $subCategory   = CRM_Utils_Type::escape( $subCategory, 'String' );

        if (!empty($subCategory))
        {
                $strSearch .= " AND sub_category = ".$subCategory;
        }

        $query = "SELECT id , description as data FROM abc_books WHERE $strSearch";
        $resultArray = array();
        $dao = CRM_Core_DAO::executeQuery( $query );
        while ( $dao->fetch( ) ) {
            $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value
        }
        echo json_encode($resultArray);
    CRM_Utils_System::civiExit();
  }
}

Comments

[FIFA oneterahertz]

What are the libraries we have to use for jquery autocomplete select event.Can you please check this link and see what is wrong in my code stackoverflow.com/questions/36860915/…

[masterxilo]

I just needed this. Btw. why does the .val() setting have to be done manually? I even had to call .trigger("change") to force the input field's event to fire when a suggestion is selected with the mouse.

[FrenkyB]

Is this in documentation anywhere?

[e18r]

This is not in the documentation but should be: api.jqueryui.com/autocomplete

[Milind]

is not related to the question