如何用JavaScript/jQuery实现基于JSON的SearchPlaces输入自动补全

需求说明 #

• 绑定所有带SearchPlaces类的动态生成文本输入框，实现自动补全
• 支持通过City（城市名）或Code（城市代码）搜索匹配
• 选中选项后，输入框显示对应City内容
• JSON数据源示例：

[
  {"Id":"1", "CountryId":"201", "DailingCode":"196", "countryName":"SUDAN", "City":"khartoum", "Code":"KRT"},
  {"Id":"2", "CountryId":"110", "DailingCode":"+254", "countryName":"KENYA", "City":"Nairobi", "Code":"NBO"},
  {"Id":"3", "CountryId":"196", "DailingCode":"+252", "countryName":"SOMALIA", "City":"Mogadishu", "Code":"MGQ"},
  {"Id":"4", "CountryId":"68", "DailingCode":"+251", "countryName":"ETHIOPIA", "City":"Addis Ababa", "Code":"ADD"},
  {"Id":"5", "CountryId":"59", "DailingCode":"+253", "countryName":"DJIBOUTI", "City":"DJIBOUTI", "Code":"JIB"}
]

现有问题 #

之前使用select框结合select2实现搜索，但需要换成文本输入框；现有代码无法实现精准匹配，搜索时会返回所有城市。

解决方案：使用jQuery UI Autocomplete #

步骤1：准备依赖 #

确保页面已引入jQuery和jQuery UI的核心脚本及样式：

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

步骤2：加载并缓存JSON数据 #

先加载JSON数据并缓存，避免重复请求：

let placesData = [];

// 加载JSON数据
function loadPlacesData() {
  const url = './Places.json';
  $.getJSON(url, function(data) {
    placesData = data;
    // 初始化已存在的输入框
    initAutocomplete();
  });
}

步骤3：初始化自动补全（含动态输入框处理） #

针对SearchPlaces类的输入框绑定自动补全逻辑，同时处理动态生成的输入框：

// 初始化自动补全
function initAutocomplete() {
  $('.SearchPlaces').autocomplete({
    source: function(request, response) {
      const searchTerm = request.term.toLowerCase();
      // 过滤匹配City或Code的结果（模糊匹配）
      const matches = placesData.filter(place => {
        return place.City.toLowerCase().includes(searchTerm) || place.Code.toLowerCase().includes(searchTerm);
      });
      // 格式化结果：显示城市名+代码，方便用户识别
      response(matches.map(place => ({
        label: `${place.City} (${place.Code})`,
        value: place.City
      })));
    },
    minLength: 1, // 输入至少1个字符触发补全
    select: function(event, ui) {
      // 选中后输入框强制显示City内容
      $(this).val(ui.item.value);
      return false; // 阻止默认行为，避免输入label文本
    }
  });
}

$(document).ready(function() {
  loadPlacesData();
  
  // 处理动态生成的输入框：通过focus事件初始化
  $(document).on('focus', '.SearchPlaces', function() {
    // 仅当未初始化过自动补全时执行
    if (!$(this).data('autocomplete')) {
      $(this).autocomplete({
        source: function(request, response) {
          const searchTerm = request.term.toLowerCase();
          const matches = placesData.filter(place => {
            return place.City.toLowerCase().includes(searchTerm) || place.Code.toLowerCase().includes(searchTerm);
          });
          response(matches.map(place => ({
            label: `${place.City} (${place.Code})`,
            value: place.City
          })));
        },
        minLength: 1,
        select: function(event, ui) {
          $(this).val(ui.item.value);
          return false;
        }
      });
    }
  });
});

关键逻辑说明 #

• 搜索匹配：将输入转为小写，同时匹配City和Code的包含关系，如需精准开头匹配，可将includes替换为startsWith
• 结果展示：选项显示城市名(代码)，帮助用户快速区分
• 动态输入框兼容：通过事件委托监听focus事件，对新生成的输入框自动初始化补全功能
• 选中行为：强制输入框显示City内容，完全符合需求

备选方案：原生HTML5 Datalist #

如果不想依赖jQuery UI，可使用原生datalist实现基础补全：

function loadPlacesData() {
  const url = './Places.json';
  $.getJSON(url, function(data) {
    // 创建datalist元素
    const datalist = $('<datalist id="placesList"></datalist>');
    data.forEach(place => {
      // 添加城市名和代码两个选项，实现双字段搜索
      datalist.append(`<option value="${place.City}">`);
      datalist.append(`<option value="${place.Code}">`);
    });
    $('body').append(datalist);
    
    // 绑定到已存在的输入框
    $('.SearchPlaces').attr('list', 'placesList');
    
    // 处理动态生成的输入框
    $(document).on('DOMNodeInserted', '.SearchPlaces', function() {
      $(this).attr('list', 'placesList');
    });
    
    // 选中代码后自动替换为城市名
    $('.SearchPlaces').on('change', function() {
      const inputVal = $(this).val();
      const matchedPlace = data.find(place => place.Code === inputVal);
      if (matchedPlace) {
        $(this).val(matchedPlace.City);
      }
    });
  });
}

$(document).ready(function() {
  loadPlacesData();
});

注意：原生datalist的搜索规则由浏览器默认实现，不同浏览器可能存在差异，功能灵活性不如jQuery UI Autocomplete。

内容的提问来源于stack exchange，提问作者C Cabdiraxman