如何根据句子结构在输入字段中创建多个自动完成？
我的自动填充的句子结构是：
例：
- 学生5年
- 老师2年
在数据库中，我有一个包含职业列表的列。 使用jQuery UI自动完成，我使用以下代码填充文本输入中的前两个部分：
$(function() { $("#occupation").autocomplete({ source: 'search.php', delay: 500, select: function(event, ui) { $(this).val(ui.item.value) } }); });
search.php代码：
query("SELECT DISTINCT occupation FROM table WHERE occupation LIKE '%" . $searchTerm . "%' ORDER BY occupation ASC"); $a_json = array(); while ($row = $query->fetch_assoc()) { $data_row["value"] = $row['occupation'] . ' for'; $data_row["label"] = $row['occupation']; array_push($a_json, $data_row); } echo json_encode($a_json);
现在，有没有办法创建第二个触发器来为其余的自动完成？ 就像选择职业一样，如果用户输入5 ，它将显示该时间段的以下自动完成选项： 5 days/ 5 weeks/ 5 months/ 5 years 。 如下图所示： 
提前感谢您的建议。
我建议按照此处显示的多个示例： http ： //jqueryui.com/autocomplete/#multiple
基本上，我们将有选择地选择要填写的标签，使用" for"作为分隔符而不是"," 。
var occupations = [{ value: "Assistant for", label: "Assistant" }, { value: "Student for", label: "Student" }, { value: "Teacher for", label: "Teacher" }]; var oLength = [ "Days", "Weeks", "Months", "Years" ]; $(function() { function split(val) { return val.split(/\sfor/); } function extractLast(term) { return split(term).pop(); } $("#occupation").on("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { event.preventDefault(); } }).autocomplete({ minLength: 0, source: function(request, response) { var term = extractLast(request.term); var results = []; if (request.term.indexOf("for") > 0) { var regE = /^(.*)\sfor\s(\d)\s(.*)$/ if (regE.test(request.term)) { return false; } if (parseInt(term) > 0) { $.each(oLength, function(k, v) { results.push(term + " " + v); }); } } else { results = $.ui.autocomplete.filter( occupations, request.term); } response(results); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split(this.value); terms[0] = terms[0] + " for"; // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(""); return false; } }); });
您可以解析查询，当您有一个数字时（因为我们还没有带数字的单词）您可以再次调用自动完成。
例：
$number = preg_replace('/\D/', '', $query); // replaces every non number for empty string if (is_numeric($number)) { $output = ''; // return variations like you want foreach (array ('weeks', 'years') as $period) { $output .= $number . $period; } return $output; }
您需要标记输入。 您的结构需要四个令牌： 和 。 您需要检查是否存在
- 当您开始编写
- 如果再次单击它，则必须检查第二个标记是否为
- 如果它在那里，那么你将不会专注于展示职业，而是可能的时间段。
- 如果您在第三个令牌中有一个号码，那么您将只需要显示时间单位。 如果没有，则显示一些样本组合，如“2天”，“5个月”，“1年”。
这可以通过Javascript轻松完成。
如果列表不在数百万条记录中，为什么不简单地使用localStorage或indexedDB将一些数据库移动到客户端？ 这可能有助于用户体验。