<div class="header-panel member">
<h2><span class="identifier">WjAutoComplete</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.angular.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.angular.Module.html"><span class="identifier">wijmo.angular</span></a></dd>
<dt>Base Class</dt><dd><a href="topic/wijmo.angular.WjComboBox.Class.html"><span class="identifier">WjComboBox</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo.angular.WjMultiAutoComplete.Class.html"><span class="identifier">WjMultiAutoComplete</span></a></dd>
<dt>Show</dt>
<dd>
<label><input type="checkbox" ng-model="ctx.showInherited"> Inherited Members</label>&nbsp;&nbsp;&nbsp;
<label><input type="checkbox" ng-model="ctx.showRaisers"> Event Raisers</label>
</dd>
</dl>
<div class="comment"><p>AngularJS directive for the <a href="topic/wijmo.input.AutoComplete.Class.html"><span class="identifier">AutoComplete</span></a> control.</p>
<p>Use the <b>wj-auto-complete</b> directive to add <b>AutoComplete</b> controls to your 
AngularJS applications. Note that directive and parameter names must be 
formatted as lower-case with dashes instead of camel-case. For example:</p>


<pre>&lt;p&gt;Here is an AutoComplete control:&lt;/p&gt;
&lt;wj-auto-complete
  text="theCountry" 
  items-source="countries"
  is-editable="false" 
  placeholder="country"&gt;
&lt;/wj-auto-complete&gt;</pre>
<p>The example below creates an <b>AutoComplete</b> control and binds it to a 'countries' array
exposed by the controller. The <b>AutoComplete</b> searches for the country as the user
types, and narrows down the list of countries that match the current input.</p>
<p><div class="member-panel example"><h3 class="node collapsed">Example</h3><div class="fiddle"><script async src="https://jsfiddle.net/Wijmo5/37GHw/embed/result,html,js,css"></script></div></div></p>
<p>The <b>wj-auto-complete</b> directive extends <a href="topic/wijmo.angular.WjComboBox.Class.html"><span class="identifier">WjComboBox</span></a> with the following attributes:</p>
<p><dl class="dl-horizontal">
  <dt>css-match</dt>            <dd><code>@</code> The name of the CSS class used to highlight 
                                parts of the content that match the search terms.</dd>
  <dt>delay</dt>                <dd><code>@</code> The amount of delay in milliseconds between 
                                when a keystroke occurs and when the search is performed.</dd>
  <dt>items-source-function</dt><dd><code>=</code> A function that provides the items 
                                dynamically as the user types.</dd>
  <dt>max-items</dt>            <dd><code>@</code> The maximum number of items to display 
                                in the dropdown.</dd>
  <dt>min-length</dt>           <dd><code>@</code> The minimum input length to require before 
                                triggering autocomplete suggestions.</dd>
</dl></p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
</div>
