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.

在输入表单，开始一个新的话题，用户需要从5000选项列表中选择一个类别。使用HTML 选择型输入元素很笨重，但它的作品。我想用某种神奇的Javascript为显示文本型输入元素，将读取用户输入和显示火柴或从已有类别自动完成，传递所需的选项的值到相应的数据库字段。

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自动完成几个插件，但该说明presuppose你明白的Javascript是如何工作的。

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

正如我上面提到的，很容易让我产生类别列表作为选择型输入元素，我可以使用CSS隐藏元素。是否有可能在文本型输入元素使用自动完成机制来控制选择列表输入？我会怎么做呢？

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.

要加快速度甚至更多，你可以使用textpattern的搜索功能与自定义显示页面而是采用了完整列表。有可能是建立一个自动完成方式，使每当进入一个新的字符/删除，自动完成重新装入新的搜索字符串。

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屋！