I’ve implemented autocomplete on an input field, but the box does not show up and firebug returns «this.source is not a function». I’ve used autocomplete on other fields of the same page without any problems. (two textarea’s).
I’m using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()
I am trying to integrate Jquery autocomplete functionality in my application. The required js files are included as below:
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/script.js"></script>
The ‘scripts.js’ file is the application specific file containing code as below:
$(document).ready(function() {
$('#aisleFrom').autocomplete({
url: '/StoreMapperApp/MapPickingZone.action?autocomplete=',
minChars: 0,
max: 10,
width: 150,
scroll: true,
cacheLength: 0
}).focus(function() {
$(this).autocomplete('search', $(this).val())
});
});
However, I get an error as below in the jquery-ui.min.js file when I try to type anything the text field having the id ‘aisleFrom’:
TypeError: this.source is not a function
…complete-loading»),this.cancelSearch=!1,this.source({term:e},this._response())},…
Can someone please advise?
Sometimes, we may run into the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.
In this article, we’ll look at how to fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.
Fix the jQuery UI Autocomplete ‘this.source is not a function’ Error
To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.
For instance, we write:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags">
to add the CSS link tag and script tags for the jQuery and jQuery UI libraries.
Then we add an input with the input tag.
Next, we turn the input into an autocomplete input with:
const fakedata = ['test1', 'test2', 'test3', 'test4', 'ietsanders'];
$("#tags").autocomplete({
source: fakedata
});
We call autocomplete with the source property set to fakeData to add the autocomplete entries and show them when we type in something that matches one or more of the fakedata entries.
Conclusion
To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.
Web developer specializing in React, Vue, and front end development.
View Archive
Had a strange issue with rails3-jquery-autocomplete 1.0.9, jquery-rails 2.1.2, and Firefox 16.0.2 under Ubuntu.
My form has two autocomplete fields. When the form first loaded, after I typed two characters in the first field, nothing happened. If I moved to the second field (which uses the same source) and typed two characters, the drop-down appeared. If I then moved back to the first field, it worked.
If I opened Firebug and tried to see / trap errors, it worked right away on the first field. Finally I was able to see an error by closing Firebug and opening only the Developer Toolbar Web Console: line 6148 of jquery-ui.js was throwing «this.source is not a function». That’s the last line of this function in the native jQuery autocomplete code:
_search: function( value ) {
this.pending++;
this.element.addClass( "ui-autocomplete-loading" );
this.source( { term: value }, this._response() );
},
There was no stack trace but I think source is supposed to contain the data source, which rails3-jquery-autocomplete initializes here. Why wasn’t it getting initialized?
On a whim, I removed the HTML «autofocus» attribute from the autocomplete field. Note that this is separate from the autoFocus option of the jQeury autocomplete widget. I’m talking about the HTML5 attribute that causes the field to receive focus when the form first loads. Once I removed that attribute, the autocomplete worked as soon as I starting typing in the first field.
I think what is going on is that the HTML5 attribute focuses the field early in the page load, so it doesn’t fire the rails3-jquery-autocomplete [focus event](https://github.com/crowdint/rails3-jquery-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L21, which is what calls the code to initialize the autocomplete.
Maybe the cleanest solution would be for rails3-jquery-autocomplete to have a $(document).ready event that checks whether an autocomplete field already has focus, and if so, initializes autocomplete on that field. In the meantime, I found that adding the following to my Javascript works around the problem:
// If autocomplete field has an HTML5 autofocus attribute, re-focus after
// the form load completes. This causes rails3-jquery-autocomplete to
// initialize the autocomplete, including setting up the JSON data source.
$(document).ready(function(){
$('input[data-autocomplete][autofocus]').focus();
});
success: function( districts_streets ) {
localStorage.removeItem("districts_streets");
localStorage.setItem('districts_streets',JSON.stringify(districts_streets));
jQuery( "#estate_address_street" ).autocomplete({ source: JSON.parse( localStorage.getItem('districts_streets') ) });
}Пытаюсь взять список автозаполнения из localStorage. Консоль жалуется this.source is not a function