diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html
index 3f63ac34499..78697e2fbf4 100644
--- a/src/components/autocomplete/demoBasicUsage/index.html
+++ b/src/components/autocomplete/demoBasicUsage/index.html
@@ -13,7 +13,12 @@
md-item-text="item.display"
md-min-length="0"
placeholder="What is your favorite US state?">
- {{item.display}}
+
+ {{item.display}}
+
+
+ No matches found.
+ Simulate query for results?
diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
index 5f636d14968..ecb29c36f74 100644
--- a/src/components/autocomplete/js/autocompleteDirective.js
+++ b/src/components/autocomplete/js/autocompleteDirective.js
@@ -11,6 +11,13 @@ angular
* `` is a special input component with a drop-down of all possible matches to a custom query.
* This component allows you to provide real-time suggestions as the user types in the input area.
*
+ * To start, you will need to specify the required parameters and provide a template for your results.
+ * The content inside `md-autocomplete` will be treated as a template.
+ *
+ * In more complex cases, you may want to include other content such as a message to display when
+ * no matches were found. You can do this by wrapping your template in `md-item-template` and adding
+ * a tag for `md-not-found`. An example of this is shown below.
+ *
* @param {expression} md-items An expression in the format of `item in items` to iterate over matches for your search.
* @param {expression} md-selected-item-change An expression to be run each time a new item is selected
* @param {expression} md-search-text-change An expression to be run each time the search text updates
@@ -27,6 +34,7 @@ angular
* @param {string=} md-menu-class This will be applied to the dropdown menu for styling
*
* @usage
+ * ###Basic Example
*
* {{item.display}}
*
*
+ *
+ * ###Example with "not found" message
+ *
+ *
+ *
+ * {{item.display}}
+ *
+ *
+ * No matches found.
+ *
+ *
+ *
+ *
+ * In this example, our code utilizes `md-item-template` and `md-not-found` to specify the different
+ * parts that make up our component.
*/
function MdAutocomplete ($mdTheming, $mdUtil) {
@@ -61,10 +88,8 @@ function MdAutocomplete ($mdTheming, $mdUtil) {
menuClass: '@?mdMenuClass'
},
template: function (element, attr) {
- //-- grab the original HTML for custom transclusion before Angular attempts to parse it
- //-- the HTML is being stored on the attr object so that it is available to postLink
- attr.$mdAutocompleteTemplate = element.html();
- //-- return the replacement template, which will wipe out the original HTML
+ var itemTemplate = getItemTemplate(),
+ noItemsTemplate = getNoItemsTemplate();
return '\
\
\
@@ -84,7 +109,6 @@ function MdAutocomplete ($mdTheming, $mdUtil) {
aria-haspopup="true"\
aria-activedescendant=""\
aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
- \
\
\
+ ' + itemTemplate + '\
\
+ ' + (function () {
+ return noItemsTemplate
+ ? '