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?

Hi Ghazali, the closing braces are present but I did not add them in the code snippet — Anand03
– Anand03, Commented Feb 27, 2015 at 17:07
Looks like you've included jQuery UI twice, the second time after the autocomplete script — adeneo
– adeneo, Commented Feb 27, 2015 at 17:10
Removing the 2nd jquery source gives an error like : TypeError: e(...).addClass(...).appendTo(...).menu is not a function — Anand03
– Anand03, Commented Feb 27, 2015 at 17:13

guest271314 · Accepted Answer · 2015-02-28 04:29:22Z

2

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>

edited Feb 28, 2015 at 4:29

answered Feb 27, 2015 at 17:10

guest271314

1

Sign up to request clarification or add additional context in comments.

2 Comments

Anand03 Over a year ago

Hi, I changed url to source and the error was gone. However, I am not able to retrieve any results when specifying the URL string in the source parameter.

Carlos Delgado Over a year ago

I was just working in a project with an extremely old version of jQuery UI. As mentioned in this answer, provide a function as value of the source attribute, inside the function execute an ajax request and pass the results as first argument in the response function.

Balkrushn · Accepted Answer · 2015-02-28 05:18:17Z

Try the below code. You do not need other javascripts other then jquery.js and jquery-ui.js.

$("#aisleFrom").autocomplete({
            source : function(request, response) {
            if ($.trim($(this.element).val()) == "") {
                return;
            }
            $.ui.autocomplete.prototype._renderMenu = function(ul, items) {
                var self = this;
                ul.append("<li><table width='100%' class='table table-condensed' style='margin-bottom:0px;'><tr>"
                                + "<td width='30%'><b>Title</b></td></tr></table></li>");
                $.each(items, function(index, item) {
                    self._renderItem(ul, item);
                });
            };
            $.getJSON("yourURLForDataRetrieving.html", {
                query : $.trim($(this.element).val()),                  
            }, response).error(
                    function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.responseText);
                    });
            },
            open : function() {
             // After menu has been opened, set width to 100px
             $('.ui-menu').width(350);
           },
           minLength : 1,
           select : function(event, ui) {
                //set value in other fields if needed ie. $("#id").val(ui.item.id);
           }
         }).data("autocomplete")._renderItem = function(ul, item) {
                return $("<li></li>")
               .data("item.autocomplete", item)
               .append("<a><table width='100%' class='table table-condensed table-hover' style='margin-bottom:0px;'><tr><td width='30%'>"
                + item.value
                + "</td></tr></table></a>").appendTo(ul);

        };

Elenilton De Sousa Freitas · Accepted Answer · 2015-12-30 11:53:45Z

0

Works fine for me. I hope it help you:

<script type="text/javascript">
$(function() {
    var dados;	
     $.post("sugestao.php",function(data){
	 dados = data.split(",");
	 $( "#busca" ).autocomplete({
      source: dados
    });
     });
  
  });
</script>

answered Dec 30, 2015 at 11:53

Elenilton De Sousa Freitas

11 bronze badge

Collectives™ on Stack Overflow

jquery: TypeError: this.source is not a function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related