0

I have a module for relating pieces of content to each other. My module successfully adds a field to all content-types that is essentially a list of integers, meant to hold node ID's. I want AJAX functionality such that when the user begins typing the title of a node, autocomplete suggestions begin appearing. I've already implemented the web service via Drupal to retrieve nodes based on partial titles, and that's working very well. The problem is now attaching the behavior I want to the form element.

Two problems:

1) No way to uniquely identify the form element in question. The class name is not going to be usable if there are more than one of them, which there may be. How can I force a unique class name? Something like class="content-relation" for each one?

2) The behavior I want to attach is failing to do so. I've tried a couple different ways...here they all are.

Way 1:

Drupal.behaviors.content_relation =  {
    attach: function(context) {
        jQuery('input.form-text').change(function() {
            var ul = jQuery('<ul />')
                .css({position: 'absolute', top: '0px', left: '0px'});

            jQuery.get(
                '/api/'+jQuery(this).val(),
                function (data) {
                    jQuery.each(data, function(item){
                        var li = jQuery('<li>');
                        li.html(item.title);
                        li.appendTo(ul);
                    });
                }
            );
        });
    }
};

Way 2:

jQuery.ready(function(){
    jQuery('input.form-text').live('change', function() {
        var ul = jQuery('<ul />')
            .css({position: 'absolute', top: '0px', left: '0px'});

        jQuery.get(
            '/api/'+jQuery(this).val(),
            function (data) {
                jQuery.each(data, function(item){
                    var li = jQuery('<li>');
                    li.html(item.title);
                    li.appendTo(ul);
                });
            }
        );
    });
});

...but none of the inputs with a class of form-text have this function listed in their change-listeners, nor do they respond to changes. Thoughts?

4
  • Don't you need to document.write or append the ul var somewhere? Looking at your code as it stands, it gets populated with <li>'s but never gets printed or appended anywhere. Also it sounds like you're recreating the References module.
    – Beebee
    Apr 3, 2012 at 15:49
  • As I get, you want to achieve autocomplete feature in a Drupal form. Can check this post : drupal.stackexchange.com/questions/78899/…
    – dhrubaj
    Jul 17, 2013 at 12:42
  • instead of using change ,use keyup event.
    – Cool
    Dec 7, 2013 at 17:05
  • If you want to relate contents with each other you can use the drupal.org/project/entityreference module that will give the exact functionality that you have implemented. Jan 7, 2014 at 6:58

2 Answers 2

1

You shouldn't need a single line of JS to have autocomplete textfield working in D6/D7. Please see the Form API refrence.

0

It's probably not possible to have a unique class name, especially since that is the job of the id attribute. The name of your field will def be unique as it matches the array you defined in your form alter.

The change event on text boxes is only fired when the value of the box has changed and it loses focus. For autocomplete you probably want it to give suggestions on each keystroke, the change event will not do this.

Have you looked at the autocomplete functionality that is built into the forms api? There is a good write up at http://timonweb.com/how-create-ajax-autocomplete-textfield-drupal-7 and more info at http://api.drupal.org.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.