Jquery自动完成输入表单,使用Textpattern类别列表作为源
-
03-07-2019 - |
题
我正在使用 Textpattern CMS 构建讨论网站 - 我对XHTML和CSS,以及Textpattern的模板语言,但PHP和Javascript有点超出我的狡猾。
在用于开始新主题的输入表单上,用户需要从超过5,000个选项的列表中选择一个类别。使用HTML select
-type input
元素非常笨拙,但它确实有效。我想使用某种Javascript魔法来显示 text
-type input element ,它将读取用户输入并显示匹配或从可用类别中自动完成,将所需选项的 value
传递到相应的数据库字段中。
我已经看过几个用于jquery的自动完成插件,但是这些说明预先假定您了解Javascript的工作原理。
正如我上面提到的,我很容易将类别列表生成为 select
-type input
元素,我可以使用CSS隐藏该元素。是否可以使用 text
-type输入元素中的自动完成机制来控制选择列表输入?我该怎么做?
解决方案
您可以设置自动完成功能以从URL获取其数据,因此我可以看到使用Textpattern以几种方式使用它。
自动完成使用的数组格式如下所示:
["example_one", "example_two", ... ]
由于您有5000多个元素,因此您可能希望创建一个只使用该格式列出它们的页面:
Page Autocomplete:
[
<txp:article_custom form="array_form" ... />
]
Form array_form:
"<txp:title />",
要使用此页面而不是将所有项目都包含在选择字段中,您需要设置自动填充功能:
$("#example").autocomplete("<txp:link_to_home />Autocomplete");
您可以使用缓存插件加快加载速度。
为了加快速度,您可以使用Textpattern搜索功能和自定义显示页面而不是使用完整列表。可能有一种方法可以设置自动填充功能,这样无论何时输入/删除新字符,都会使用新的搜索字符串重新加载自动填充。
其他提示
编辑:已更新,将option.value放入隐藏字段
是的,有可能。例如,如果您有以下html代码:
<input type="text" id="myTextBoxId"></input>
<!-- added hidden field to store selection option value -->
<input type="hidden" id="myHiddenField" name="selectedCategory"></input>
<select id="mySelectId" style="display: none">
<option>Category 1</option>
<option>Category 2</option>
<option>...</option>
</select>
您可以使用以下jquery代码将此数据放入数组中:
var categories = $.map($("#mySelectId option"), function(e, i)
{
return e; // Updated, return the full option instead its text
});
最后,您可以使用自动完成插件,例如这一个 :
$("#myTextBoxId").autocomplete(categories,
{
formatItem : function(item) { return item.text; } // Added
});
检查自动完成插件演示页,查看选项(如autoFill和mustMatch)。
你需要做的就是将它放在你的html标题中(jquery js,autocomplete css&amp; js,你的页面的代码):
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>
<script type="text/javascript">
$(function()
{
// Updated script
var categories = $.map($("#mySelectId option"),
function(e, i) { return e; });
$("#myTextBoxId").autocomplete(categories,
{
formatItem : function(item) { return item.text; }
});
// Added to fill hidden field with option value
$("#myTextBoxId").result(function(event, item, formatted)
{
$("#myHiddenField").val(item.value);
}
});
</script>
好吧,这只是几行代码,但我真的不喜欢“select to array”。东西。如果可能的话,你应该创建一个返回与用户输入匹配的类别列表的页面(同样,请查看演示页面以获取示例,不幸的是,我对Textpattern的帮助不大)。
当然,我没有测试,如果你有问题就发表评论。
编辑:我进行DID测试,但不是我的选择
中的5k项目;)