Question

Can I use data attribute for the source of my autocomplete?

for example

HTML

 <input type="text" class="autocomplete" data-source="/search.php" />

Javascript

  $(".autocomplete").autocomplete({
        source :  $(this).data('source'),
        minLength:1,
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

I tried it but it always gives me an error.
What’s wrong with my code?

Uncaught TypeError: Property 'source' of object #<Object> is not a function

Answer 1

here’s the fix

$('.autocomplete').keypress(function(){ 
    $(this).autocomplete({ 
        source: $(this).data('source'), 
        minLength: 1, 
        select: function(event, ui) { 
            console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
        } 
    }); 
}); 

I added a keypress function so that it will get the current element.