用于输入表单的 Jquery 自动完成，使用 Textpattern 类别列表作为源 [英] Jquery autocomplete for input form, using Textpattern category list as a source

问题描述

我正在使用 Textpattern CMS 来构建一个讨论站点——我对 XHTML 和CSS，还有Textpattern 的模板语言，但是PHP 和Javascript 有点超出我的能力范围.

I'm using the Textpattern CMS to build a discussion site-- I have a firm grasp of XHTML and CSS, as well as Textpattern's template language, but PHP and Javascript are a bit beyond my cunning.

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

On the input form to begin a new topic, users need to select a category from a list of over 5,000 options. Using the HTML select-type input element is very unwieldy, but it works. I would like to use some kind of Javascript magic to display a text-type input element that will read user input and display matches or autocomplete from the available categories, passing the required option's value into the appropriate database field.

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

I've seen several autocomplete plugins for jquery, but the instructions presuppose that you understand how Javascript works.

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

As I mentioned above, it's easy for me to generate the category list as a select-type input element, and I can hide that element using CSS. Is it possible to control select-list input using an autocomplete mechanism in a text-type input element? How would I do that?

推荐答案

您可以设置自动完成以从 URL 获取其数据，因此我可以看到 Textpattern 以几种巧妙的方式使用了它.

You can set up the autocomplete to take its data from a URL, so I can see this being used in a couple nifty ways with Textpattern.

自动完成使用的数组格式如下所示:

The array format that autocomplete uses looks like this:

["example_one", "example_two", ... ]

由于您有 5000 多个元素，您可能希望创建一个页面，使用该格式简单地列出它们:

Since you have 5000+ elements, you might want to create a page that simply lists them using that format:

Page Autocomplete:
[
    <txp:article_custom form="array_form" ... />
]

Form array_form:
"<txp:title />",

要使用此页面而不是在选择字段中包含所有项目，您需要设置自动完成功能:

To use this page instead of including all the items in a select field, you'd set up your autocomplete with:

$("#example").autocomplete("<txp:link_to_home />Autocomplete");

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

You can use a caching plugin to speed up loading.

为了进一步加快速度，您可以使用带有 自定义显示页面 而不是使用完整列表.可能有一种方法可以设置自动完成，以便每当输入/删除新字符时，自动完成都会重新加载新的搜索字符串.

To speed things up even more, you could use the Textpattern search function with a custom display page instead of using a full listing. There may be a way to set up Autocomplete so that whenever a new character is entered/removed, autocomplete is reloaded with the new search string.

这篇关于用于输入表单的 Jquery 自动完成，使用 Textpattern 类别列表作为源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！