We've tested the Jquery UI (jquery-ui-1.8.10.custom.min.js) Autocomplete function in a simple HTML page which worked.
We then copy the same code into an Asp.net User Control and it stops working. The Javascript error reads "$searchBox.autocomplete is not a function".
This user control is being used in an Asp.net Sitefinity 3.7 project. On the page it has a ScriptManager. Not sure what else I can add...
Anyone know what's going on?
Ammend:
<script src="/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$('input#searchInput').autocomplete({
source: ['johannesburg z', 'johannesburg x', 'johannesburg v', 'johannesburg b', 'johannesburg a', 'johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
minLength: 3,
open: function (e, ui) {
var
acData = $(this).data('autocomplete'),
styledTerm = termTemplate.replace('%s', acData.term);
acData
.menu
.element
.find('a')
.each(function () {
var me = $(this);
me.html(me.text().replace(acData.term, styledTerm));
});
}
});
});
</script>
<div class="outerSearchBox">
<div class="searchFieldWrapper">
<input id="searchInput" type="text" class="searchField" /><a class="searchButton">SEARCH
</a>
<div class="searchSugContainer">
Thanks.
To solve the "$(...). autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise, the error is thrown. Copied!
A user types into an input, and the autocomplete “completes” their thought by providing full terms or results: this is the very base of an autocomplete experience. For example, try typing the letter “m” in the search box below. You can select suggestions like “macbook” and “mobile”.
Advertisements. Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field.
The selected value of the AutoComplete can only be a string value. To set the value, use the [value] property binding of the component or the ngModel binding.
That error usually means that jquery or the plugin hasn't yet been loaded. Check that you're function call isn't getting hit before the document is loaded:
$(function(){
var $searchBox = $('#mysearchBox');
$searchBox.autocomplete(...);
});
Also check that the path to the javascript files are correct. Firebug or google chrome developer tools are useful for checking both of these issues.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With