Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
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 '12 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/… –  djs Jul 17 '13 at 12:42
    
instead of using change ,use keyup event. –  ARUN Dec 7 '13 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. –  Sudheesh Damodaran Jan 7 at 6:58
add comment

2 Answers

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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