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

我正在使用构建一个讨论网站——我对XHTML和CSS以及Textpattern的模板语言有着坚实的掌握，但PHP和Javascript有点超出我的能力范围

在输入表单上，要开始一个新主题，用户需要从5000多个选项列表中选择一个类别。使用HTMLSELECTTYPE输入元素非常笨拙，但它可以工作。我想使用某种Javascript魔术来显示文本类型的输入元素，该元素将读取用户输入，并显示可用类别中的匹配项或自动完成项，将所需选项的值传递到相应的数据库字段中

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

如上所述，我很容易将category列表生成为selecttype输入元素，并且可以使用CSS隐藏该元素。是否可以在文本类型输入元素中使用自动完成机制来控制选择列表输入？如何操作？

编辑：更新为将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>

最后，您可以使用自动完成插件，如：

查看可以使用的选项，如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项目

编辑：更新为在隐藏字段中放置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>

最后，您可以使用自动完成插件，如：

查看可以使用的选项，如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项目

您可以设置autocomplete从URL获取其数据，这样我就可以看到它在Textpattern中以几种巧妙的方式使用

autocomplete使用的数组格式如下所示：

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

您可以设置自动完成以从URL获取数据，因此我可以看到这在Textpattern中有两种很好的用法

autocomplete使用的数组格式如下所示：

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

谢谢，我就快到了！使用您的建议，我可以显示文本输入元素，并根据用户输入动态生成选项列表。我仍然需要将选项的值传递到表单中。到目前为止，在我的测试中，数据库从隐藏的选择字段中获取值。我的意思是：类别名称您给出的方法允许我从自动完成下拉列表中选择类别名称，但是数据库从隐藏选择菜单上的默认选择中提取类别值。javascript可以根据用户在自动完成字段中的输入对隐藏输入元素进行选择吗？或者是否可以使用其他方法更改值？您好，我修改了解决方案以符合您的要求。我希望这有帮助；谢谢你

---

欧点！更新后的脚本不再显示自动完成选项-当我键入时，不会发生任何事情。我的javascript控制台显示一个SyntaxError:Parse error-between}；还有结束语。这是我的错误，还是打字错误？谢谢，我就快到了！使用您的建议，我可以显示文本输入元素，并根据用户输入动态生成选项列表。我仍然需要将选项的值传递到表单中。到目前为止，在我的测试中，数据库从隐藏的选择字段中获取值。我的意思是：类别名称您给出的方法允许我从自动完成下拉列表中选择类别名称，但是数据库从隐藏选择菜单上的默认选择中提取类别值。javascript可以根据用户在自动完成字段中的输入对隐藏输入元素进行选择吗？或者是否可以使用其他方法更改值？您好，我修改了解决方案以符合您的要求。我希望这有帮助；非常感谢。更新后的脚本不再显示自动完成选项-当我键入时，不会发生任何事情。我的javascript控制台显示一个SyntaxError:Parse error-between}；还有结束语。这是我的错误，还是打字错误？我终于通过这里发布的修改工作了：谢谢！我终于得到了这个工作使用修改张贴在这里：谢谢！