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

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 header (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 方面为您提供太多帮助)。

当然，我没有测试，有问题可以留言。编辑:我进行了测试，但我的 select 中没有 5k 项；)