Question

我的自动填充的句子结构是：

<Occupation> <for> <time period>

示例：

学生5年
老师2年

在数据库中，我有一个包含职业列表的列。使用jQuery UI自动完成，我使用以下代码填充文本输入中的前两个部分：

<script>
    $(function() {
        $("#occupation").autocomplete({
            source: 'search.php',
            delay: 500,
            select: function(event, ui) {
                $(this).val(ui.item.value)
            }
        });
    });
</script>
<input type='text' name='occupation' id='occupation’>

search.php代码：

<?php
$searchTerm = $_GET['term'];
$query = $db->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。如下图所示：

提前感谢您的建议。

Answer 1

我建议按照此处显示的多个示例进行操作：http://jqueryui.com/autocomplete/#multiple

基本上，我们会选择使用" for"作为分隔符而不是","来选择要填写的代码。

＆＃13;

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;
    }
  });
});

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="occupation" />

＆＃13;

Answer 2

你可以解析查询，当你有一个数字时（因为我们还没有带数字的单词）你可以再次调用自动完成。

示例：

2>nul

Answer 3

您需要对输入进行标记。您的结构需要四个令牌：<Occupation>，<for>，<time length>和<time unit>。您需要检查是否存在<for>令牌。

当您开始编写<Occupation>令牌时，您的代码将搜索并获取职业选择。当您选择一个时，您将使用“<Occupation> <for>”句子填充输入。
如果再次单击它，则必须检查第二个标记是否为<for>。
- 如果它在那里，那么你将不会专注于展示职业，而是可能的时间段。
- 如果您在第三个令牌中有一个号码，那么您将只需要显示时间单位。如果没有，则显示一些样本组合，如“2天”，“5个月”，“1年”。

这可以通过Javascript轻松完成。

Answer 4

如果列表不在数百万条记录中，为什么不简单地使用localStorage或indexedDB将一些数据库移动到客户端？这可能有助于用户体验。

如何根据句子结构在输入字段中创建多个自动完成？

4 个答案: