Why Bootstrap autocomplete Select not working correctly?

Question

I am trying to get Bootstrap/jQuery autocomplete to work. With the help of @ Rav most os it works apart from the ' select: function( event, ui ) {'. When the user starts to enter text in to the '#client_name' text field, after three charatcoes a list of possible options appears.

One of the options is selected, that works, but then I need to populate '$('#company_image_1')'.

The Ajax return looks like this:

["BRITA|Brita.png|LONHA","Britannia|BrittaniaPharmaceuticals.png|","Britannia Pharmaceuticals Ltd|Britannia_1.png|GILHR","British Airports Authority|baa.png|LHRPQ"]

The code below is what I am trying:

$(document).ready(function() { 
  $("#LookUpCompanyImage").html('');
    $('#client_name').autocomplete({
      minLength: 3,
      appendTo: "#suggestion_container",
      "position": { my : "right top", at: "right bottom", collision: "flip" },
      source: function( request, response ) {
        $.ajax({
          url : 'check_name.php',
          type: "get",
          dataType: "json",
          data: {
            name_startsWith: request.term,
            row_num : 1
          },
          success: function( data ) {
            response( $.map( data, function( item ) {
              var code = item.split("|");
              console.log("CODE", code);
              return {
                label: code[0],
                value: code[0],
                data : item
              };
            }));
          },
          autoFocus: true,

         select: function( event, ui ) {
           var names = ui.item.data.split("|");
           $('#company_image_1').val(names[1]);
           $("#LookUpCompanyImage").html("<img src=\"../../../../../apps/conf/conf_images/adminsmall/" + names[1] + "\">");
         }
       }
     );
    }
  });
});

Can anyone see why the '$('#company_image_1').val(names[1]);' is not populated.

Answer 1

You have not ended your source property properly. This means the select and autoFocus properties meant to be declared as parameters of autocomplete, are actually being declared inside your ajax function.

The syntax should be as follows:

$(document).ready(function() {
  $('#LookUpCompanyImage').html('');
  $('#client_name').autocomplete({
    minLength: 3,
    appendTo: '#suggestion_container',
    position: { my: 'right top', at: 'right bottom', collision: 'flip' },
    
    source: function(request, response) {
      $.ajax({
        url: 'check_name.php',
        type: 'get',
        dataType: 'json',
        data: {
          name_startsWith: request.term,
          row_num: 1
        },
        success: function(data) {
          response(
            $.map(data, function(item) {
              var code = item.split('|');
              console.log('CODE', code);
              return {
                label: code[0],
                value: code[0],
                data: item
              };
            })
          );
        }
      });
    },
    
    autoFocus: true,
    select: function(event, ui) {
      var names = ui.item.data.split('|');
      $('#company_image_1').val(names[1]);
      $('#LookUpCompanyImage').html(
        '<img src="../../../../../apps/conf/conf_images/adminsmall/' +
          names[1] +
          '">'
      );
    }
  });
});