我正在编写一个网络应用程序，它使用标记系统来组织用户提交的报告。其中一部分使用 ajax 来获取标签建议，并根据报告的内容呈现给用户。我正在寻找有关如何向用户呈现此信息的建议。
我不太确定执行此操作的友好方式是什么。
编辑:
嗯，这里的大多数响应似乎都集中在用户输入关键字上。我在这里试图定义的想法更多的是向用户呈现一组建议的关键字，他们可以接受或拒绝这些关键字，而无需手动输入标签。 (这个选项当然对他们来说仍然可用)
--------------------------- # say they can checkoff or select tags they like.
| o[tag2] x[foo] o[moo] |
| x[tag1] o[bar] |
---------------------------
最佳答案
如果我明白你在问什么，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>
关于javascript - 关于如何向用户显示给定文本的建议标签的 UI 建议？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2517750/