jQuery：类型错误：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不是一个函数 ...complete-loading"),this.cancelSearch=!1,this.source({term:e},this._response())},...

请问有人可以提供建议吗？

- Anand03

---

你忘记了关闭文档准备的闭合括号。 - Norlihazmey Ghazali

嗨，Ghazali，闭合括号已经存在，但我没有在代码片段中添加它们。 - Anand03

请编辑您的帖子，这会让其他人感到困惑。 - Norlihazmey Ghazali

看起来你已经包含了两次jQuery UI，第二次是在自动完成脚本之后。 - adeneo

移除第二个 jQuery 源代码会导致错误，例如：TypeError: e(...).addClass(...).appendTo(...).menu 不是一个函数。 - Anand03

Answer 1

尝试将url更改为source。请参见自动完成小部件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>

- guest271314

---

嗨，我将URL更改为源代码后，错误消失了。但是，当在源参数中指定URL字符串时，我无法检索任何结果。 - Anand03

我刚刚在一个使用极老版本jQuery UI的项目中工作。如此答案中所述，将一个函数作为源属性的值，然后在函数内执行一个ajax请求，并将结果作为第一个参数传递给响应函数。 - Carlos Delgado

Answer 2

对我来说工作得很好。希望它能帮到你：

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

- Elenilton De Sousa Freitas

Answer 3

尝试下面的代码。您只需要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);

        };

- Balkrushn