在JQuery中使用XML文件自动完成输入

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<items>
  <item>Apple</item>
  <item>Orange</item>
  <item>Banana</item>
  <item>Mango</item>
</items>

<input type="text" id="inputBox" />
<div id="autocompleteResults"></div>

$(document).ready(function() {
  // 监听输入框的键盘输入事件
  $('#inputBox').keyup(function() {
    var inputText = $(this).val(); // 获取输入框的值
    $('#autocompleteResults').empty(); // 清空自动完成结果区域

    // 使用JQuery的AJAX方法读取XML文件
    $.ajax({
      type: 'GET',
      url: 'data.xml', // XML文件的路径
      dataType: 'xml',
      success: function(xml) {
        // 遍历XML文件中的每个item节点
        $(xml).find('item').each(function() {
          var itemName = $(this).text(); // 获取item节点的文本内容

          // 判断item节点的文本内容是否包含输入框的值
          if (itemName.toLowerCase().indexOf(inputText.toLowerCase()) >= 0) {
            // 创建一个新的结果项，并添加到自动完成结果区域
            var resultItem = $('<div>').text(itemName);
            $('#autocompleteResults').append(resultItem);
          }
        });
      }
    });
  });
});