pass parameters to autocomplete using jquery

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.

Austin Brunkhorst · Accepted Answer · 2013-01-21 09:21:19Z

2

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')
});

edited Jan 21, 2013 at 9:21

answered Jan 21, 2013 at 8:06

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

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

2 Comments

user1808827 Over a year ago

thanks @Austin, its working perfect. One quick question: If I add any .tags runtime, do I need to call above function after adding .tags dynamically? will it work fine?

Austin Brunkhorst Over a year ago

Yes you would need to run that snippet again. But it would be more efficient if you just binded .autocomplete to the element individually after you add it to the document. I've updated my answer to include that scenario

user3094403 · Accepted Answer · 2014-12-29 11:07:35Z

-1

Just Pass like this

$('#txtCropname').autocomplete('Handler/CropSearch.ashx', { extraParams: {ids:'new'} });

edited Dec 29, 2014 at 11:07

user3094403

6,39011 gold badges50 silver badges56 bronze badges

answered Dec 29, 2014 at 10:42

SrinivasNyalam

11 bronze badge

Collectives™ on Stack Overflow

pass parameters to autocomplete using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related