jquery: TypeError: this.source is not a function

Question

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?

Answer 1

Try changing url to source . See Autocomplete Widget source

---

  jQuery(document).ready(function() {         
    $("#aisleFrom").autocomplete({
        minLength: 0,
        // substitute `source` for `url`
        source: function(request, response) {
          var term = request.term;
          // get json 
          $.getJSON(/* /path/to/json/ */)
          .then(function success(data) {
            // filter results
            var res = $.grep(data, function(val) {
              return new RegExp($.ui.autocomplete.escapeRegex(term), "gi")
                     .test(val.toLowerCase())
            })
            , key = $.inArray(term.toUpperCase(), res)
            , results = term.length === 1 
                          & key !== -1 
                          ? Array(res[key]) 
                          : res;
            response(results)
          }, function error(jqxhr, textStatus, errorThrown) {
               console.log(textStatus, errorThrown) // log `$.ajax` errors
        })
      }
    }).focus(function() {
          $(this).autocomplete("search", $(this).val())
    });          
  });

jQuery(document).ready(function() {

  $("#tags").autocomplete({
    minLength: 0,
    source: function(request, response) {
      var term = request.term;
      $.getJSON("https://gist.githubusercontent.com/anonymous/86f61fee217838ba6c3c/raw/395a557fa400163f048f30370d782db554913b2b/availableTags.json")
        .then(function success(data) {
          var res = $.grep(data, function(val) {
            return new RegExp($.ui.autocomplete.escapeRegex(term), "gi")
              .test(val.toLowerCase())
          })
          , key = $.inArray(term.toUpperCase(), res)
          , results = term.length === 1 
                        && key !== -1 
                        ? Array(res[key]) 
                        : res;
          response(results)
        }, function error(jqxhr, textStatus, errorThrown) {
             console.log(textStatus, errorThrown) // log `$.ajax` errors
      })
    }
  }).focus(function() {
      $(this).autocomplete("search", $(this).val())
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags">
</div>