Autocomplete custom field with query

👨‍💻 Development Help
9

I had a similar situation. I needed to differentiate between similar records (e.g. identical neighborhood names but from different states), so I was looking for a way to customize the autocomplete so that it could show extra information. I’m not sure how to do this with YUI which is what these fields use by default, so I went with the jQuery UI autocomplete method.

In my case I do not need to create a custom search.php file. However, if you need to use a custom query you would instead be better off creating a new EntryPoint extension which does the query (using a db query or beans as needed) https://docs.suitecrm.com/developer/entry-points/ and returns a JSON array with labels and corresponding values. I was able to use the same entrypoint used by the quicksearch action.

First we need to override the /metadata/editviewdefs.php from the module by copying the file to custom//metadata/editviewdefs.php

You will need to add the path for a javascript file which will be in charge of enabling the custom autocomplete field. This needs to be included within the [‘EditView’][‘templateMeta’] arrray. Example:


'includes' =>
      array (
        0 =>
        array (
          'file' => 'custom/modules/<modulename>/customautocomplete.js',
        ),
      ),

The .js filename can be anything.

Another change that needs to be applied on the same file is inside the array for the field definition we want to customize. My field name is isre_listing_location, so use the one that applies to the field you are customizing. For example:


array (
            'name' => 'isre_listing_location', //name of the field
            'studio' => 'visible',
            'label' => 'LBL_ISRE_LISTING_LOCATION',
            'displayParams' => array('class' => 'sqsEnabled sqsNoAutoFill'), //this is a relate field so we want to keep the quick search buttons, but we don't want to use the quick search autofill. Be aware these values are case-sensitive!
          ),

Other resources use the ‘customCode’ to generate the form fields for the name and hidden id used. In this case that was not needed, but we had to find a way to disable the default autocomplete. This is done with the ‘class’ value shown above.

Next you need to create the file referenced ‘custom/modules//customautocomplete.js’ and add the following javascript code (do remember to change the field references to your own):

 
$(document).ready(fieldAutoComplete);
 function fieldAutoComplete(){
   $( "#isre_listing_location" ).autocomplete({ //select the field we want to autocomplete with jquery
     source: function(request, response) { //we need to customize the source
       $.post('index.php?', {action: 'quicksearchQuery', module:'Home', to_pdf:'true', data: '{"form":"EditView","method":"query","modules":["jjwg_Areas"],"group":"or","field_list":["name","city","state","id"],"populate_list":["isre_listing_location","jjwg_areas_id_c"],"required_list":["parent_id"],"conditions":[{"name":"name","op":"like_custom","end":"%","value":""}],"order":"name","limit":"30","no_match_text":"No Match"}', query: request.term}, response, 'json')
       .done(function(data) { //this will process the response received since the autocomplete needs an array with the values and the response brings extra info
          response($.map( data.fields, function( item ) {
              return {
                  label: item.name,
                  city: item.city, //this extra field will be used for the autocomplete list, as defined in field_list before
                  state: item.state, //this extra field will be used for the autocomplete list, as defined in field_list before
                  value: item.id
              }
          }));
       });
     },
    minLength: 2,
    select: function( event, ui ) { //this will enter the selected values into the correct fields, modify according to your fields but do not forget the hidden ID field.
      $('#isre_listing_location').val(ui.item.label);
      $('#jjwg_areas_id_c').val(ui.item.value);
      return false;
    }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) { //this formats the results display. In my case I needed extra info to differentiate between similar items
      return $( "<li>" )
        .append( "<div>" + item.label + " (" + item.city + ", " + item.state + ")</div>" )
        .appendTo( ul );
    };
 }

We send a custom POST or ajax request following the same format used by quick search autocomplete. In my case this will suffice as I only needed to get extra fields from the field_list parameter. Other parameters may or may not apply to your situation, so check them out one by one.

Remember to do Quick Repair and reload the page. Sometimes we have to reload twice or delete cache so it starts loading the correct modifications.

Another possibility would have been to extend the YUI autocomplete: https://yuilibrary.com/yui/docs/autocomplete/#writing-result-formatters , since it has similar functionality to render result items, but I was able to more quickly and easily solve my issue using jQuery UI which I am more familiar with.

Hope this helps others.

3 Likes