jQuery Autocomplete下拉列表未显示及选项无法绑定问题求助

Hey there! Let's troubleshoot why your jQuery Autocomplete isn't showing the dropdown or updating the input field. I've got some common fixes and checks to walk you through:

jQuery Autocomplete is part of jQuery UI, so you need both libraries (plus the UI stylesheet) to make it work. Make sure you're loading them in the right order first jQuery, then jQuery UI, then the CSS:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

If you see an error like $(...).autocomplete is not a function in your console, this is almost certainly the issue.

Most issues stem from incorrect source data or missing select handlers. Here's a working example to compare against:

Local data source example #

$(function() {
  // 先确保DOM加载完成再初始化
  const availableOptions = [
    "New York",
    "Los Angeles",
    "Chicago",
    "Houston",
    "Phoenix"
  ];

  $("#your-input-id").autocomplete({
    source: availableOptions, // 必须是字符串数组或label/value对象数组
    select: function(event, ui) {
      // 手动设置输入框值，避免默认行为冲突
      $(this).val(ui.item.value);
      // 阻止默认事件，防止输入框被覆盖成奇怪的值
      event.preventDefault();
      // 这里可以添加选中后的额外逻辑，比如打印到控制台
      console.log("Selected:", ui.item.value);
    }
  });
});

Remote data source example #

If you're pulling data from an API, make sure the response is in a format Autocomplete understands (either a string array or array of {label: "...", value: "..."} objects):

$("#your-input-id").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/your-api-endpoint",
      data: { term: request.term }, // 把用户输入传给后端
      success: function(data) {
        console.log("API Response:", data); // 检查返回格式是否正确
        response(data); // 把数据传给Autocomplete渲染下拉
      }
    });
  },
  select: function(event, ui) {
    $(this).val(ui.item.label || ui.item.value);
    event.preventDefault();
  }
});

Even if your input logs to the console, there might be silent failures. Open your browser's dev tools (F12) and check the Console tab for red error messages—things like missing DOM elements, invalid API responses, or CSS conflicts.

Always wrap your Autocomplete code in $(function() { ... }) (or place it at the bottom of your HTML) to make sure the input element is loaded into the DOM before you try to bind the plugin to it. If you run the code too early, the plugin won't find the input and nothing will happen.

Sometimes custom styles can override jQuery UI's default dropdown styles, making it invisible even if it's rendered. Use dev tools to inspect the DOM while typing—look for a <ul class="ui-autocomplete"> element. If it exists but isn't visible, check its display, z-index, or position properties to make sure it's not being hidden.

If you're still stuck, share a snippet of your full code (HTML + JS) and I can help pinpoint the exact issue!

内容的提问来源于stack exchange，提问作者Andre Reid