jQuery and Grails/HTML - 像 Google 一样使文本字段成为完整的文本
Posted
技术标签:
【中文标题】jQuery and Grails/HTML - 像 Google 一样使文本字段成为完整的文本【英文标题】：jQuery and Grails/HTML - Make text field complete text like Google does 【发布时间】：2011-04-21 23:08:31 【问题描述】：我想在我的页面中设置某些字段，以便像 Google 一样向我显示可能的完成句子列表。
我认为这是通过 jQuery 完成的，但我不确定。
文本字段被命名为商品。
假设我写了 General 并且在列表、数组或 DB 中我有 General Commodity 我应该在文本字段下显示 General Commodity。
提前致谢！
-------更新-------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
var data = "General Commodity,General Store,General Custer,General Mills".split(",");
$("#Ccommodity").autocomplete(
source: data
);
</script>
当我转到 Ccommodity 输入文本字段时，我写了 G，但没有任何反应，也许我在那里有一些语法错误。
感谢您的帮助
【问题讨论】：
【参考方案1】：您可能想查看jQueryUI Autocomplete widget。它有几种提供建议列表的方式，而且几乎可以肯定其中有一些对你有用的东西。
这是一个非常基本的演示：http://jsfiddle.net/QU9st/
这是它的来源：
$(function()
var data = "General Commodity,General Store,General Custer,General Mills".split(",");
$("#commodity").autocomplete(
source: data
);
);
该演示仅使用静态字符串数组作为数据源，但您也可以使用 JSON 或 XML 等格式的远程数据源。
要获得它，只需将其放在您的 <head> 标签中的某处：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
当然，您还需要包含 jQuery：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
【讨论】：
这正是我正在寻找的。我需要为 Grails 安装 jquery-ui 插件吗？ 是的，您需要在您的页面上专门包含 jQueryUI。你可以从他们的网站下载它或从谷歌的代码库中获取它的链接：code.google.com/apis/libraries/devguide.html 如何在 Grails 中安装 jQuery UI？ 您并没有真正“安装”它。它是一个 javascript 库，就像 jQuery 一样。您只需将它包含在您的页面中，并带有一个脚本标签。 然后放在哪里？因为我知道有一个用于 Grails 的 jQuery UI 插件，但我不确定它是否相同 grails.org/plugin/jquery-ui【参考方案2】：jQuery 有一个Autocomplete widget，它可以让它做你想做的事。这是一个例子： jQuery：
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax".split(" ");
$("#commodity").autocomplete(data);
html:
<input type="text" id="commodity" name="commodity">
【讨论】：
我需要为 Grails 安装 jQuery-UI 插件，还是已经自带了 jQuery 插件？ 这是独立于jQueryUI的，除了插件本身不需要任何进一步的安装。这就是为什么我包含了与@Ender 不同的答案 该插件已弃用。 jQueryUI 是这个插件的继承者。以上是关于jQuery and Grails/HTML - 像 Google 一样使文本字段成为完整的文本的主要内容，如果未能解决你的问题，请参考以下文章
difference of top and left between Javascript and Jquery