Question

我正在使用Textpattern CMS来构建一个讨论网站 - 我对XHTML和CSS以及Textpattern的模板语言有着深刻的把握，但PHP和Javascript有点超出我的狡猾。

在用于开始新主题的输入表单上，用户需要从超过5,000个选项的列表中选择一个类别。使用HTML select - 类型input元素非常笨拙，但它确实有效。我想使用某种Javascript魔法来显示text - 类型的输入元素，它将读取用户输入并显示匹配或从可用类别中自动完成 ，将所需选项的value传递到相应的数据库字段。

我已经看过几个用于jquery的自动完成插件，但是这些说明预先假定您了解Javascript的工作原理。

正如我上面提到的，我很容易将类别列表生成为select - 类型input元素，我可以使用CSS隐藏该元素。是否可以使用text类型输入元素中的自动完成机制来控制选择列表输入？我该怎么做？

Answer 1

编辑：已更新，将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
});

最后，您可以使用this one之类的自动完成插件：

$("#myTextBoxId").autocomplete(categories,
{
    formatItem : function(item) { return item.text; } // Added
});

检查autocomplete plugin demo page以查看您可以使用的options（例如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>

好吧，它只有几行代码，但我真的不喜欢“选择阵列”的东西。如果可能的话，你应该创建一个返回与用户输入匹配的类别列表的页面（再次，查看演示页面中的例子，不幸的是，我对Textpattern的帮助不大）。

当然，我没有测试，如果你有问题就发表评论。编辑：我进行了DID测试，但没有考虑我的select;）中的5k项目

Answer 2

您可以设置自动完成功能以从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");

您可以使用缓存插件加快加载速度。

为了加快速度，您可以使用带有custom display page的Textpattern搜索功能，而不是使用完整列表。可能有一种方法可以设置自动填充功能，这样无论何时输入/删除新字符，都会使用新的搜索字符串重新加载自动填充。

Jquery自动完成输入表单，使用Textpattern类别列表作为源

2 个答案: