Added showcase and codeblocks for Autocomplete component inside Modal.

Author: kevzlou7979

src/main/java/gwt/material/design/demo/client/application/addins/autocomplete/AutoCompleteView.java

@@ -1,16 +1,14 @@
 package gwt.material.design.demo.client.application.addins.autocomplete;
 
 import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.event.logical.shared.ValueChangeEvent;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
-import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.SuggestOracle;
 import com.google.gwt.user.client.ui.Widget;
 import com.gwtplatform.mvp.client.ViewImpl;
 import gwt.material.design.addins.client.autocomplete.MaterialAutoComplete;
-import gwt.material.design.addins.client.autocomplete.base.MaterialSuggestionOracle;
+import gwt.material.design.client.ui.MaterialModal;
 import gwt.material.design.client.ui.MaterialToast;
 import gwt.material.design.demo.client.application.addins.autocomplete.base.User;
 import gwt.material.design.demo.client.application.addins.autocomplete.base.UserOracle;
@@ -26,7 +24,10 @@ interface Binder extends UiBinder<Widget, AutoCompleteView> {
     }
 
     @UiField
-    MaterialAutoComplete acList, acListType, acListLimit;
+    MaterialAutoComplete acList, acListType, acListLimit, acModal;
+
+    @UiField
+    MaterialModal modal;
 
     @Inject
     AutoCompleteView(Binder uiBinder) {
@@ -36,6 +37,7 @@ interface Binder extends UiBinder<Widget, AutoCompleteView> {
         acList.setSuggestions(oracle);
         acListType.setSuggestions(oracle);
         acListLimit.setSuggestions(oracle);
+        acModal.setSuggestions(oracle);
     }
 
 
@@ -79,4 +81,14 @@ public List<User> getAllUsers() {
         list.add(new User("https://s3.amazonaws.com/uifaces/faces/twitter/tonymillion/128.jpg", User.Position.MARKETING, false, "Clint Heller", "[email protected]", "123123123", "645-555-65", "Makati City, Philippines", "Gwt Material"));
         return list;
     }
+
+    @UiHandler("btnOpenModal")
+    void onOpenModal(ClickEvent e) {
+        modal.openModal();
+    }
+
+    @UiHandler("btnClose")
+    void onClose(ClickEvent e) {
+        modal.closeModal();
+    }
 }

src/main/java/gwt/material/design/demo/client/application/addins/autocomplete/AutoCompleteView.ui.xml

@@ -85,5 +85,28 @@
         <demo:PrettyPre addStyleNames="lang-xml z-depth-1">
             &emsp;&lt;ma:autocomplete.MaterialAutoComplete limit="3" placeholder="States" />
         </demo:PrettyPre>
+
+        <m:MaterialTitle title="Inside Modal" description="You can build your overlay inside the modal" />
+        <m:MaterialButton ui:field="btnOpenModal" text="Open Modal" textColor="white" waves="DEFAULT"/>
+        <m:MaterialModal ui:field="modal">
+            <m:MaterialModalContent>
+                <m:MaterialTitle title="Select contacts" description="Some description here..."/>
+                <ma:autocomplete.MaterialAutoComplete ui:field="acModal" placeholder="Contacts"/>
+            </m:MaterialModalContent>
+            <m:MaterialModalFooter textAlign="RIGHT">
+                <m:MaterialButton ui:field="btnClose" text="Close" type="FLAT" textColor="black" waves="DEFAULT"/>
+            </m:MaterialModalFooter>
+        </m:MaterialModal>
+        <demo:PrettyPre addStyleNames="lang-xml z-depth-1">
+            &emsp;&lt;m:MaterialModal ui:field="modal"><br/>
+            &emsp;&lt;m:MaterialModalContent><br/>
+            &emsp;&lt;m:MaterialTitle title="Select contacts" description="Some description here..."/><br/>
+            &emsp;&lt;ma:autocomplete.MaterialAutoComplete ui:field="acModal" placeholder="Contacts"/><br/>
+            &emsp;&lt;/m:MaterialModalContent><br/>
+            &emsp;&lt;m:MaterialModalFooter textAlign="RIGHT"><br/>
+            &emsp;&lt;m:MaterialButton ui:field="btnClose" text="Close" type="FLAT" textColor="black" waves="DEFAULT"/><br/>
+            &emsp;&lt;/m:MaterialModalFooter><br/>
+            &lt;/m:MaterialModal><br/>
+        </demo:PrettyPre> 
     </g:HTMLPanel>
 </ui:UiBinder>