Setting autocomplete source using HTML attributes

Setting the autocomplete source option with jQuery UI. Using HTML attributes helps decouple the markup from the widget instantiation code.

by Adam Boduch

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css">
<input type="text" data-source="foo.php"/>
<input type="text" data-source="bar.php"/>

JavaScript

$('input').autocomplete({
    minLength: 1,
    create: function() {
        var $this = $(this),
            source = $this.data('source');
        if (source) {
            $this.autocomplete('option', 'source', source);
        }
    }
});

$('input').first().autocomplete('option', 'source');
$('input').last().autocomplete('option', 'source');