Jquery 自动完成在本地工作但不在生产环境中工作

Question

我正在敲键盘试图解决这个问题。

我有一个网站在搜索表单的单个字段上使用 jquery UI 自动完成功能。超级简单，只需从数组中拉出一个列表，根本不会发生服务器端的事情。代码基本上是直接从 Jquery UI 示例页面 (https://jqueryui.com/autocomplete/) 中提取的。

在我的本地开发环境中，在 Homestead 上使用 Laravel，它可以完美运行。但是在服务器上（使用相同的代码）它根本不起作用。控制台内没有错误，因此几乎不可能判断这里出了什么问题。我在同一台服务器上有其他网站使用自动完成没有问题，这让它变得更加陌生。

代码如下：

对于表单域

<label for="subdivisons">Subdivision</label>
<input type="text" id="subdivisons" name="subdivision" class="form-control" value="{{ old('subdivision') }}" placeholder="Choose a subdivision">

这是页脚中的 jquery 函数：

<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery-ui.min.js') }}"></script>

<script>
$( function() {
  var available_subdivisions = [
    "CAPE HAZE WINDWARD",
    "CLUBHOUSE",
    "EAGLES PRESERVE SUBDIVISION",
    "FIDDLERS GREEN",
    "FIDDLERS GREEN NATURE TRAIL",
    "FIDDLERS GREEN RIVERVIEW",
    "FIDDLERS GREEN TALL PINES",
    "LEMON TREE",
    "OAKLAND HILLS SEC",
    "PINEHURST",
    "PORT CHARLOTTE SUBS",
    "PRESERVE AT WINDWARD PH1",
    "RIVERHOUSE",
    "ROTONDA BROADMOOR",
    "ROTONDA HEIGHTS",
    "ROTONDA LAKES",
    "ROTONDA RIVER CONDO",
    "ROTONDA SHORES",
    "ROTONDA WEST BROADMOOR",
    "ROTONDA WEST LONG MEADOW",
    "ROTONDA WEST OAKLAND HILL",
    "ROTONDA WEST OAKLAND HILLS",
    "ROTONDA WEST PEBBLE BEACH",
    "ROTONDA WEST PINE VALLEY",
    "ROTONDA WEST PINEHURST",
    "ROTONDA WEST WHITE MARSH",
    "SOUTH GULF COVE",
    "SUNSET VILLAGE AT ROTONDA WEST",
    "TOWNHOMES AT CAPE HAZE"
  ];
$( "#subdivisons" ).autocomplete({
    source: available_subdivisions
  });
});
</script>

同样，这基本上与 jquery 自动完成示例页面上使用的完全相同，并且它在我的本地开发服务器上完美运行。没有控制台错误。我检查了所有 src 元素以确保它们链接正确。再一次，我在此服务器上托管的其他几个网站上使用自动完成功能。唯一的区别是他们使用远程数据源而不是从数组中提取数据，但我认为这不是问题。我就是想不通这个。

谢谢！

Answer 1

原来我的 available_subdivisions 数组被包含在主布局 blade 视图和扩展视图中。一旦我将它从扩展视图中删除，它就可以正常运行。我犯了一个愚蠢的错误。

Jquery 自动完成在本地工作但不在生产环境中工作

Jquery Autocomplete working on local but not on production

javascript

jquery

autocomplete

jquery-ui-autocomplete