Menu icon Foundation
Autocomplete Search Field

Hey there! Trying to add autocomplete to a search field, so as you type it gives you options, similar to Google. I know it comes standard with jQuery, but I keep getting errors.

 

The Javascript code (iconsearch.js)

 $( '#iconTag' ).autocomplete({
	source: availableTags = ["alert","a ton of data here", "example data"];
	minLength: 3,
	appendTo: "#frmCriteria"
});

 

The HTML code:

<div id="criteriaModal" class="reveal-modal small" data-reveal="data-reveal">
    <form id="frmCriteria" data-abide="ajax">
        <fieldset>
            <div class="row collapse">
                <div class="small-10 columns">
                    <label for="tags">Tags: </label>
                    <input id="iconTag" type="text" data-bind="value: tag"/>
                </div>
            </div>
     </fieldset>
  </form>
</div>

 

I get an error: "Uncaught TypeError: $(...).autocomplete is not a function".

jQuery is working because the Foundation accordion works, and the JS file is compiling into the app.js in public. Thoughts?

autocompletejavascript

Hey there! Trying to add autocomplete to a search field, so as you type it gives you options, similar to Google. I know it comes standard with jQuery, but I keep getting errors.

 

The Javascript code (iconsearch.js)

 $( '#iconTag' ).autocomplete({
	source: availableTags = ["alert","a ton of data here", "example data"];
	minLength: 3,
	appendTo: "#frmCriteria"
});

 

The HTML code:

<div id="criteriaModal" class="reveal-modal small" data-reveal="data-reveal">
    <form id="frmCriteria" data-abide="ajax">
        <fieldset>
            <div class="row collapse">
                <div class="small-10 columns">
                    <label for="tags">Tags: </label>
                    <input id="iconTag" type="text" data-bind="value: tag"/>
                </div>
            </div>
     </fieldset>
  </form>
</div>

 

I get an error: "Uncaught TypeError: $(...).autocomplete is not a function".

jQuery is working because the Foundation accordion works, and the JS file is compiling into the app.js in public. Thoughts?

Val Ery about 3 years ago

Hi Doug!

You need jQuery UI (https://jqueryui.com/autocomplete/). No?

Doug Black about 3 years ago

Yes, I thought it came directly with jQuery. Thank you for clarifying!