关于如何向用户显示给定文本的建议标签的 UI 建议？答案

【问题标题】：UI suggestions on how to display suggested tags for a given text to a user?关于如何向用户显示给定文本的建议标签的 UI 建议？
【发布时间】：2019-07-06 19:49:52
【问题描述】：

我正在编写一个使用标记系统来组织用户提交的报告的网络应用程序。它的一部分使用 ajax 来获取标签的建议，以便根据报告的内容呈现给用户。我正在寻找有关如何为用户呈现此信息的建议。

我不太确定这样做会是一种友好的方式。

编辑：

嗯，这里的大部分回复似乎都集中在用户输入关键字上。我在这里试图定义的想法更多地是向用户展示一组他们可以接受或拒绝的建议关键字，而无需手动输入标签。（当然，他们仍然可以使用该选项）

---------------------------    # say they can checkoff or select tags they like.
| o[tag2]  x[foo]  o[moo] |
|   x[tag1]   o[bar]      |
---------------------------

【问题讨论】：

Stackoverflow 做得很好。但无论如何，他们都这样做。

标签： javascript user-interface tags

【解决方案1】：

如果我理解您的要求，jQueryUI 包含一个 autocomplete widget 来执行此操作。

在此处查看工作演示：http://jsbin.com/ezifi

您可以修改monkey-patching the render functions on the autocomplete widget 提出建议的方式。

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  </style>

    <style type="text/css" media="screen">

    h1 { font-size: 20pt; color:Navy; }
    h2 { font-size: 18pt; font-weight:bold; color: #DDD; }

    body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
    body { margin:0; padding:0; height:100%;}

    .ui-widget { font-size: 0.8em; line-height:0.6em; }
    .ui-widget .ui-widget { font-size: 0.7em; }

    div.inputDiv  {
         float: left;
         width: 42%;
         height: 400px;
         min-height: 100%;
         border: Navy 1px dotted;
         margin: 14px;
         padding: 10px;
    }

    </style>
</head>
  <body>
    <div class='inputDiv'>
      <h1>jQueryUI Autocomplete demo</h1>
      <p>Type a few characters of a word</p>
      <form action="jquery" id="form1">
        <input type="text" id="input1"/>

      </form>
    </div>

    <div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
    </div>

  </body>
</html>

【讨论】：

【解决方案2】：

Google 方法是一种选择：一个输入文本框，下面列出了下拉框样式的建议。

【讨论】：

【解决方案3】：

del.icio.us 做得很好。它们在文本输入下方显示相关标签列表，用户可以在其中输入自己的标签。单击列表中的建议标签会将其添加到输入中。很好很简单。

使用标签，人们可能希望一次添加多个标签，因此立即将它们暴露出来会很有帮助。

可能会影响您做出决定的其他一些考虑因素：

在任何给定时间，您会建议多少个标签？ 2？ 5? 10？ 50 个？
是否应该强制用户只使用您建议的标签？输入他们自己的选项是否有效？

【讨论】：