jquery: TypeError: this.source 不是一个函数

Question

我正在尝试在我的应用程序中集成 Jquery 自动完成功能。所需的js文件如下：

<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>

“scripts.js”文件是包含如下代码的应用程序特定文件：

$(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())
    });
});

但是，当我尝试在具有 id 'aisleFrom' 的文本字段中键入任何内容时，我在 jquery-ui.min.js 文件中收到如下错误：

TypeError：this.source 不是函数 ...完成加载"),this.cancelSearch=!1,this.source({term:e},this._response())},...

有人可以建议吗？

Answer 1

尝试将 url 更改为 source 。见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>

Answer 2

试试下面的代码。除了 jquery.js 和 jquery-ui.js 之外，您不需要其他 javascript。

$("#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);

        };

Answer 3

对我来说很好用。希望对你有帮助：

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