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

Posted 2023-02-24

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

【英文标题】：How to create multiple autocomplete in an input field based on a sentence structure?

【发布时间】：2018-05-11 21:58:50

【问题描述】：

我的自动补全的句子结构是：

<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。如下图所示：

提前感谢您的建议。

【问题讨论】：

为什么不选择职业后出现的依赖下拉菜单？

是的，我可以，但我期待尝试一些有趣的事情。有什么可能的方法吗？谢谢@MuhammadOmerAslam

好吧，如果我这样做，我将在选择后隐藏职业并将文本复制到另一个自动完成之前的标签以选择年份下拉列表，以便它显示 student for 然后打开的下拉列表显示5 年等等，这样的事情你可能不得不玩 css

@Ashonko 你的意思是标签：jqueryui.com/autocomplete/#multiple 但没有样式和分隔符。

【参考方案1】：

我建议遵循此处显示的多个示例：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;
    
  );
);

<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" />

【参考方案2】：

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

例子：

$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;

【参考方案3】：

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

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

这可以通过 javascript 轻松完成。

【参考方案4】：

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