Implement jQuery Autocomplete plugin with source URL specified in element markup

Question

I am implementing jQuery AutoComplete plugin like this:

HTML:

<input type='text' class='AutoComplete' url='/source/data'>

jQuery:

$( ".AutoComplete" ).autocomplete({
    source: "/source/data"
});

Above code is working. Now I want that source part of Autocomplete option should be fetched from input's url attribute (url='/source/data').

How is it possible ?

Thanks

Cheeso · Accepted Answer · 2012-04-28 15:47:13Z

2

You need to call the autocomplete() function (to set up the source), separately for each textbox.

function init(){
    $( ".autocomplete" ).each(function(ix,item){
       var $item = $(item),
           url = $item.attr('data-ac-url');
       $item.autocomplete({ source: url});
    });
}

$(document).ready(init);

This works with this HTML:

<input id='box1'
       class='autocomplete'
       value='' type='text'
       data-ac-url='/asp/autocomplete-src1.aspx' />
<input id='box2'
       class='autocomplete'
       value='' type='text'
       data-ac-url='/asp/ac-src2.php'/>

To specify the URL in the element markup, I recommend using an attribute like data-???, which complies with the HTML5 standard.

answered Apr 28, 2012 at 15:47

Cheeso

193k106 gold badges486 silver badges734 bronze badges

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

2 Comments

Student Over a year ago

+1 Thanks. Working perfectly. Can you please fix another thing. If there is not a data-ac-url property in element then it generates an error in firebug like this.source is not a function. Can we not fix it like that it do nothing if there is not a data-ac-url property.

Cheeso Over a year ago

Why not? You could probably insert an if statement in there to test for that. I wonder how you would do that? hmmmmm.....

Collectives™ on Stack Overflow

Implement jQuery Autocomplete plugin with source URL specified in element markup

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related