UI suggestions on how to display suggested tags for a given text to a user?_问答_开发者

UI suggestions on how to display suggested tags for a given text to a user?

开发者 https://www.devze.com 2022-12-24 12:19 出处：网络

I am writing a web-app that uses a tagging system to organize the user\'s submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their repor

I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.

I'm not quite certain what a friendly way to do this would be.

Edit:

Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)

---------------------------    # say they can che开发者_StackOverflow社区ckoff or select tags they like.
| o[tag2]  x[foo]  o[moo] |
|   x[tag1]   o[bar]      |
---------------------------

If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.

UI suggestions on how to display suggested tags for a given text to a user?

See the working demo here: http://jsbin.com/ezifi

You can modify how the suggestions are presented by 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>

The Google method is one option: an input textbox with suggestions listed drop-box style underneath.

del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.

With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.

Some other considerations that might factor into your decision:

How many tags will you suggest at any given time? 2? 5? 10? 50?
Should the user be forced to use your suggested tags only? Is entering their own a valid option?