1

I'm trying to pass a custom form attribute (category) through jQuery UI Autocomplete to use in a product search. The form looks like <form id="BulkOrderForm" category="samplecategory"><input></input>...</form> and contains inputs that use the autocomplete script. There can be several forms on each page, so I need to be able to get the category value from the form that contains the active input field.

Here's my source:

function autocomplete() {
    $("input.wcbulkorderproduct").autocomplete({
        element: function(){
            var element = $('form#BulkOrderForm').attr('category');
            return element;
        },
        source: function(request, response, element){
            $.ajax({
                url: WCBulkOrder.url+'?callback=?&action='+acs_action+'&_wpnonce='+WCBulkOrder.search_products_nonce,
                dataType: "json",
                data: {
                    term: request.term,
                    category: element
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    });
}

Any thoughts on how this can be acheived?

Improve this question

2 Answers 2

Reset to default
2
+50

If I'm understanding correctly, you're trying to use the active input's parent form in the ajax request. Here's a way to achieve that:

Html:

<form data-category="form1">
    <input type="text" />
    <input type="text" />
</form>
<form data-category="formB">
    <input type="text" />
    <input type="text" />
</form>

JS:

$('form').each(function () {
    var category = $(this).data('category');

    $(this).find('input').autocomplete({
        source: function (request, response) {
            response([category]);
        }
    });
});

Instead of using autocomplete on a catch-all selector that gets inputs from all forms, first select the forms themselves. For each one, extract the category, then select all child inputs and call autocomplete on that result. Then you can use the category variable in the ajax call - in the example I'm simply passing it to the callback to display.

http://jsfiddle.net/Fw2QA/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

+1 good solution. Although I don't know if the OP is willing to use the "data" functionality of jQuery. My opinion, is that is better to use it since putting attributes in the html and handling them by hand seems geeky, but can be exceptions.
Yeah, since either the attribute or the data method can be used to get the category, and the data method is the 'proper' HTML5 way to do it (even though there's not really a practical difference), I figured I'd throw that in there to pique the OP's curiosity :)
2

I'll give you another solution, you can lookup the parent form of the active input, and extract the attribute from it. Because I don't know if this category in your form is dynamic or no, or either if you can control all of the process involved in your code, I'll give you a more generic solution, although if that attribute is dynamic "Turch" solution is way better than mine, by letting the data functionality of jquery handle the attribute changes, if it's static, than you can just do it like this:

function autocomplete() {
    var element = $("input.wcbulkorderproduct").autocomplete({
        source: function(request, response){
            $.ajax({
                url: WCBulkOrder.url+'?callback=?&action='+acs_action+'&_wpnonce='+WCBulkOrder.search_products_nonce,
                dataType: "json",
                data: {
                    term: request.term,
                    category: element
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    }).parents('form').first().attr('category'); 

    //chained call, sets autocomplete, grabs the parent form and the attribute
    //which is saved on the variable element, and is used on every call through
    //javascript context inheritance.
}

UPDATE

A little example illustrating my suggestion (provided by @Turch > thanks), can be found here.

Improve this answer

7 Comments

That would only work if there was one form, since all calls to source would reference the same element variable. Check out jsfiddle.net/Fw2QA/1 - all inputs use 'formB'. You could still go bottom-up (look up form from element) instead of top-down (get forms, for each, get inputs) but it would need to be saved to a closed-over variable so that different inputs can use different values.
Here's a version that does that, with a .each() : jsfiddle.net/Fw2QA/2 . Now there's a copy of the variable for each input's source
@Turch that's not correct. the call to source is called for each input, because he is setting the autocomplete onto an input directly based on ID. My code assumes the setup is made by id, your example is wrong (.../1), as it makes an incorrect assumption, by specifying a more generic selector!
Ah ok, your last comment cleared it up. Yeah that's totally a viable way as well (and that's what I did in the last .../2 fiddle ). Ed: comment editing yay :)
Thanks for your answer, it's much appreciated. I went with Turch's answer because it worked right out of the box and Turch answered first. But, your answer works, at least for a single form! Looks like it would need to be modified a bit to work with multiple forms but I didn't have a chance to investigate that yet...
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.