I was having the issues all time to create custom autocomplete fields without the id(s) populated in the autocomplete field after selecting. How to do that in my custom form?

Comments

lipinponmala007’s picture

1. add custom_module.js inside the scripts folder
2. in form definition or in form alter make like this (example is for the user id field)

//add javascript file place it in the scripts folder 
drupal_add_js ( drupal_get_path ( 'module', 'custom_module' ) . '/scripts/custom_module.js', 'file' );

 // actual field that will act as auto complate
 $form['user_id'] = array(
    '#type' => 'textfield',
    '#autocomplete_path' => 'custom_made/autocomplete',
   );
   
   // mirror filed that will hold actualfield's value
  $form['user_id_mirror'] = array(
    '#type' => 'textfield',
    '#attributes'=> array('style' => 'display:none;')
    
  );

4. In the javascript file put this code

 jQuery(document).ready(function() {
	 jQuery('#edit-user-id').bind('keypress keyup change blur', function() {   
	               // i am not a javascript expert so you can use your advanced script
			jQuery('#edit-user-id-mirror').val(jQuery(this).val());  // copies typed and selected values to the hidden field
			var replacedValue = jQuery('#edit-user-id').val().replace(/ *\([^)]*\) */g, "")  
			jQuery('#edit-user-id').val(replacedValue); // again replaces the brackets,'(:uid)' in the autocmplete field.
		});
	 
 });
 

5. In submit function use form_state['values']['user_id_mirror] to get the actual value

Hopes somebody comes with a better approch. and this will be useful to some one.

fmstasi’s picture

Yes, I had come to the conclusion that something along these lines had to be done. It mainly works, except that the click on an item in the list of autocompleted items is not captured, and I could not find how to capture it, since it was impossible to analyze the list of autocompleted items with the browsers' developer's tools. So, I had to resort to capturing the click on the document, which isn't very efficient:

  var structParse = function() {
    var matches = $('#edit-struct-input').val().match(/(.*)(\(:.*\))/) ;
    if (matches !== null) {
      $('#edit-struct-key').val(matches[2]) ;
      $('#edit-struct-input').val(matches[1]) ;
    }
  } ;

  $('#edit-struct-input').bind('keypress keyup change blur click', structParse);
  $(document).click(structParse);

Now it does what I want, but having a click event on the whole document is really annoying. I am convinced that textfield with autocomplete suffers from serious design flaws: there was no reason to emulate an HTML SELECT, labels should have been used both in the item list and in the text field, and the value sent in a hidden field.

If somebody could tell me how to capture the click on the item list, or, even better, how to use a custom version of the autocomplete field, it would be very useful!

artatum’s picture

Subscribe. These autocomplete fields really suck in D8. 

BTW, drupal_add_js() should not be used anymore in D8...