Question

I have read this post: Passing extra parameters to source using Jquery UI autocomplete
I am develping a Web Page in Asp.net C#.

My HTML code:

 <input class="tags" to_search="Birds" />
 <input class="tags" to_search="Animals" />

Javascript:

$(document).ready(function() {
     $(".tags").autocomplete({
          source: "GenericHandler.ashx?name="+$(this).attr("to_search")
    });
});

I want to pass the to_search attribute of the <input> tag to generic handler.
Above code is calling GenericHandler.ashx but gives null value of name.
How can I get name value equals to the to_search attribute of <input> tag?
Please help.

Answer 1

Assuming that you don’t add any .tags during runtime, you can do this.

$('.tags').each(function(i, tag) {
    $(tag).autocomplete({
        source: 'GenericHandler.ashx?name='+ $(tag).attr('to_search')
    });
});

I also suggest you use data attributes in your input tags like this.

<input class="tags" data-search="Birds" />

resulting in the final solution,

$('.tags').each(function(i, tag) {
    $(tag).autocomplete({
        source: 'GenericHandler.ashx?name='+ $(tag).data('search')
    });
});

In the event that you do add a element to your document dynamically you can do this.

// jquery object of the new element created
var element;

element.autocomplete({
    source: 'GenericHandler.ashx?name='+ element.data('search')
});