Jquery AutoComplete自动完成 的使用方法实例

下面我将详细讲解 Jquery AutoComplete 自动完成的使用方法实例。

1. 什么是 Jquery AutoComplete

Jquery AutoComplete 是 Jquery UI 中的一种组件，可以实现自动完成功能。用户在输入框中输入关键字，组件会自动弹出下拉框，其中提供了与关键字相关的建议词汇，用户可以通过键盘选择词汇或鼠标点击下拉框中的选项快速选取。

2. Jquery AutoComplete 的使用方法

首先，需要引用 Jquery UI 库，并在 HTML 中创建一个输入框，并绑定 AutoComplete 功能：

<!-- 引入 Jquery 和 Jquery UI 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- 在 HTML 中创建一个输入框，并设置 id 为 search-input -->
<input type="text" id="search-input">

然后，在 JavaScript 代码中初始化 AutoComplete 组件，并设置数据源（source）：

$(function() {
  $("#search-input").autocomplete({
    source: ["Java", "JavaScript", "PHP", "Python", "C++", "Swift"]
  });
});

以上代码会在输入框中绑定自动完成功能，并设置自动完成下拉框中的选项，在用户输入时根据输入内容过滤选项。用户在输入框中输入关键字时，根据选项中包含关键字的程度进行筛选，将符合条件的选项显示在下拉框中供用户选择。

同时，AutoComplete 组件提供了一些参数可以进行设置，比如 minLength（设置触发自动完成的最小字符数）和 delay（设置自动完成下拉框出现的延迟时间），可以根据实际需求进行定制。

3. Jquery AutoComplete 的代码示例

下面给出两个 Jquery AutoComplete 的示例，分别涵盖了基本使用方法和高级定制方法。

示例一：基础功能演示

<!-- 基础演示页面，与上面的示例1代码是一致的 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="search-input">

<!-- 初始化自动完成 -->
<script>
$(function() {
  $("#search-input").autocomplete({
    source: ["Java", "JavaScript", "PHP", "Python", "C++", "Swift"]
  });
});
</script>

示例二：自定义 look and feel

<!-- 自定义样式界面 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.my-autocomplete .ui-widget-content {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.my-autocomplete .ui-state-focus {
  background-color: #f2f2f2;
  border-color: transparent;
}
.my-autocomplete .ui-menu-item {
  padding: 3px 10px;
}
.my-autocomplete .ui-menu-item:hover {
  background-color: #f2f2f2;
}
.my-autocomplete i {
  color: #aaa;
  font-size: 12px;
}
</style>

<!-- 自定义样式界面 -->
<input type="text" id="my-textbox" placeholder="输入您感兴趣的内容（比如：Java，Python等）">
<div id="my-autocomplete" class="my-autocomplete"></div>

<!-- JS 代码逻辑 -->
<script>
$(function() {
  // 自定义 AutoComplete
  $("#my-textbox").autocomplete({
    minLength: 1, // 设置最小触发字符数
    delay: 200, // 设置显示延迟时间
    source: ["Java", "JavaScript", "PHP", "Python", "C++", "Swift"],
    // 定义下拉框的展现
    open: function (event, ui) {
      var menu = $(".ui-autocomplete");
      menu.width(400); // 调整下拉框宽度
      menu.position({
        my: "left top",
        at: "left bottom",
        of: this
      })
    },
    // 定制菜单项的样式
    _renderItem: function (ul, item) {
      return $("<li>")
        .append(item.value + $("<i>").text(" - " + item.desc))
        .appendTo(ul);
    }
  });
});
</script>

以上两个示例分别演示了基础功能和自定义样式等高级定制的功能，可以根据实际需要进行使用。

希望这篇文章对您有所帮助。