大数据量输入框自动完成

1. 使用jQuery UI Autocomplete插件

该插件可使用远程数据源，利用AJAX动态获取数据并显示在输入框下拉列表中。可以使用下面的代码来实现：

HTML:

<input type="text" id="myInput">

Javascript:

$( "#myInput" ).autocomplete({ source: "search.php", minLength: 2 });

PHP (search.php):

$searchTerm = $_GET['term']; $results = // 从数据库中获取匹配项，这里省略详细代码 echo json_encode($results);

2. 使用Select2插件

Select2是一个基于jQuery的选择框插件，可用于大数据量输入框的自动完成。该插件支持AJAX、标签、搜索等特性。以下是示例代码：

HTML:

<input type="text" id="myInput">

Javascript:

$( "#myInput" ).select2({ ajax: { url: "search.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // 搜索关键字 page: params.page }; }, processResults: function (data, params) { params.page = params.page || 1; return { results: data.items // 返回匹配项 }; }, cache: true }, minimumInputLength: 2 // 最小输入字符数 });

PHP (search.php):

$searchTerm = $_GET['q']; $results = // 从数据库中获取匹配项，这里省略详细代码 echo json_encode([ 'items' => $results ]);

注意：上述代码中的“search.php”代码用于从数据库中获取匹配项，需根据实际情况进行修改。