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

Answer 1

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.