1

我正在使用Textpattern CMS来建立一个讨论站点——我对 XHTML 和 CSS 以及 Textpattern 的模板语言有很好的掌握，但是 PHP 和 Javascript 有点超出我的能力。

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

我已经看过几个 jquery 的自动完成插件，但这些说明的前提是您了解 Javascript 的工作原理。

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

4

2 回答 2

4

编辑：更新为将 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、自动完成 css 和 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 帮不上什么忙）。

当然，我没有测试，如果您有问题，请发表评论。编辑：我做了测试，但我没有 5k 个项目select；）

于 2009-03-04T20:08:16.527 回答
1

您可以设置自动完成以从 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 搜索功能，而不是使用完整列表。可能有一种方法可以设置自动完成功能，以便每当输入/删除新字符时，都会使用新的搜索字符串重新加载自动完成功能。

于 2009-06-20T17:31:21.643 回答